响应式布局框架 Pure-CSS 5.0 示例中文版-上
0. Pure-CSS 介绍
Pure CSS 是雅虎出品的 CSS 框架，
依托于Normalize.CSS，在不适用任何JS代码情况下即可实现响应式布局的轻量级框架，无依赖，体积小。
1. CDN
<linkrel="stylesheet"href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
2. 设置 Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. 完整 HTML5 模板
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
</head>
<body>
<!--
网页内容
-->
</body>
</html>
4. 隐藏元素
在元素中加入hidden 属性，效果相当于 display: none !important;
<input type="text" name="_csrf" hidden>
5. 图片适应视窗大小
在 IMG 标签中加入类 .pure-img
<img class="pure-img" src="...">
6. 网格 Grids
网格对象中包含两种样式类：网格类（pure-g）和单元格类（pure-u 或者 pure-u-*）
单元格的大小由类命指定， 如：pure-u-1-2 表示 50% 宽度， pure-u-1-5 表示 20% 宽度
示例：
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
7. 响应式网格 Responsive Grids
PureCSS默认没有添加响应式网格框架，需要时请手动添加一下内容到 head 标签中
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->
对比普通网格与响应式网格
普通：
<div class="pure-g">
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
</div>
响应式
<div class="pure-g">
<div class="pure-u-1pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>
在大屏幕里，普通 与 响应式 的单元格宽度均是 33.3%，但在小屏幕中 响应式 的单元格宽度将变为 100%
默认的媒体大小定义
Key
CSS Media Query
Applies
Classname
None None Always .pure-u-*
sm @media screen and (min-width: 35.5em) ≥568px .pure-u-sm-*
md @media screen and (min-width: 48em) ≥768px .pure-u-md-*
lg @media screen and (min-width: 64em) ≥1024px .pure-u-lg-*
xl @media screen and (min-width: 80em) ≥1280px .pure-u-xl-*
注：默认情况下 1em = 16px
在表格中应用边框与间距
<style>
.pure-g > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.l-box {
padding: 1em;
}
</style>
<div class="pure-g">
<div class="pure-u-1-2 l-box"> ... </div>
<div class="pure-u-1-2 l-box"> ... </div>
</div>
注：使用 box-sizing 可以防止边框占用像素，扰乱布局
为
了更好的兼容性，网格默认对 <html>, <button>, <input>,
<select>, 和 <textarea> 使用了 font-family: sans-serif;
如需要修改，可添加如下样式：
<style>
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
/* 自定义字体 */
font-family: Georgia, Times, "Times New Roman", serif;
}
</style>
- 上一篇 »响应式网页设计简单入门
- 下一篇 »CSS3 Media Queries 实现响应式设计