美国雅虎公司出品的一组轻量级、响应式纯css模块,适用于任何Web项目
借助 Pure 和一些补充css, 能够确保网页或者APP实现跨浏览器使用,并保持特性。 最重要的是, CSS文件仍然非常小!由一组响应式模块组成. 采用 SMACSS 作为规范编写
学习网站
获取pure
基本
引入
<!-- Viewportmeta元素控制移动端浏览器的宽度和缩放。为了自适应设备的宽度 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">
栅格
非响应式
使用.pure-g
创建行, 使用pure-u-*
创建列
单元格用不同的class
名表示宽度。比如 pure-u-1-2
表示宽1/2即50%, 同样pure-u-1-5
表示宽1/5即20%
class
名包含pure-g
的元素,它的子元素必须是单元格,即class
名包含 pure-u
或pure-u-*
的元素,所有需要显示的内容都要放在单元格中
栅格默认支持5列和24列
<!-- 1行3列 -->
<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>
响应式栅格
引入grids-responsive.css
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
通过媒体查询进行判断,用em作为媒体查询的宽度单位,而不是px,考虑到媒体查询能适应网页的缩放
<!-- 元素在小屏幕上宽width: 100%,在中等屏幕变为width: 33.33% -->
<div class="pure-g">
<div class="pure-u-1 pure-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>
只使用pure的栅格
直接引入
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/1.0.0/base-min.css&pure/0.6.0/grids-min.css&pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/1.0.0/base-min.css&pure/0.6.0/grids-min.css&pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
响应式图片
添加class.pure-img
,配合viewport
可实现图片伸缩,做响应式网站的时候比较有用。
<img class="pure-img" src="...">
表单&按钮&表格&菜单
没啥特殊说明,都是一些样式使用介绍,在元素上添加对应的类即可,
想要什么样式的表单去上面复制相应的代码就好了