purecss使用

轻量化CSS框架，简单好用

media查询类名

sm        ≥ 568px            .pure-u-sm-*

md        ≥ 768px            .pure-u-md-*

lg        ≥ 1024px           .pure-u-lg-*

xl        ≥ 1280px           .pure-u-xl-*

xxl       ≥ 1920px           .pure-u-xxl-*

xxxl      ≥ 2560px           .pure-u-xxxl-*

x4k       ≥ 3840px           .pure-u-x4k-*

media查询使用方法

使用max-width就从大往小
@media (max-width: 375px){}
使用min-width就从小往大
@media (min-width: 375px){}

页面写法

<class="pure-u-1-1 pure-u-sm-1-1 pure-u-md-1-1 pure-u-lg-1-3">

由小至大，不用将所有分辨率写上，只要达到适配最终分栏数量的最低分辨率就行

注意：实现页面自适应需要搭配grids-responsive-min.css使用才能起效
grids-responsive-min.css

purecss官网purecss.io