pure

文章目录

美国雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目
借助 Pure 和一些补充css, 能够确保网页或者APP实现跨浏览器使用，并保持特性。最重要的是, CSS文件仍然非常小！由一组响应式模块组成. 采用 SMACSS 作为规范编写

学习网站

pure官网
 W3CSchool

获取pure

下载Pure
访问其他CDN获取

基本

引入

<!-- Viewportmeta元素控制移动端浏览器的宽度和缩放。为了自适应设备的宽度 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/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="...">

表单&按钮&表格&菜单

没啥特殊说明，都是一些样式使用介绍，在元素上添加对应的类即可，

表单看这里
 按钮看这里
 表格看这里
 菜单看这里

想要什么样式的表单去上面复制相应的代码就好了