Pure布局
裴彦
Pure
pure是一款轻量式，响应式的css模块，可以直接使用Yahoo的cdn
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
- 最大的特点就是框架基于纯CSS，无任何JavaScript代码，渲染速度比较快。
- 框架十分小巧，压缩后仅5.7k。 组件丰富，包括表格、表单、按钮、表、导航等。
- CSS类的标识十分简单，因此在使用Pure的过程中代码会比较友好。
Pure栅格
| Key | CSS Media Query | 应用 | 类名 |
|---|---|---|---|
| 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-* |
非响应式的
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<style type="text/css">
.red{
background-color: red;
}
.blue{
background-color:blue;
}
.pure-g [class *= "pure-u"] {
/* Set your content font stack here: */
font-family: consola, Times, "Times New Roman", serif;
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u2-3 blue"> ... </div>
<div class="pure-u-2-3 red"> ... </div>
<div class="pure-u-2-3 blue"> ... </div>
<div class="pure-u-2-3 red"> ... </div>
</div>
</body>
</html>响应式的
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<style type="text/css">
.red{
background-color: red;
}
.blue{
background-color:blue;
}
.pure-g [class *= "pure-u"] {
/* Set your content font stack here: */
font-family: consola, Times, "Times New Roman", serif;
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-2-3 blue"> ... </div>
<div class="pure-u-1 pure-u-md-2-3 red"> ... </div>
<div class="pure-u-1 pure-u-lg-2-3 blue"> ... </div>
<div class="pure-u-1 pure-u-xl-2-3 red"> ... </div>
</div>
</body>
</html>ps：设置了颜色，缩放是看起来比较明显
pure-u-x-y：x，y都是数字，表示页面宽度为x分之y，和下面四个用法一样
pure-u-sm-x-y、pure-u-md-x-y，pure-u-lg-x-y，pure-u-xl-x-y
唯一的区别是会根据页面的缩放的大小，宽度会从原来的x分之y，变成100%，可以根据上面的表格看出，当页面小于1280px时，pure-u-xl-x-y就会变成100%了,可以试一下，，挺好用的
（ 于2016年9月13日，http://blog.csdn.net/bzd_111）
类似资料：