分享一个最近在使用的响应式css框架 Pure
2020-12-13 14:51
标签：style class blog code http tar 响应式，就是根据浏览器或不同设备屏幕大小自适应内容。 第一次查响应式呢，了解到是要在head里写判断浏览器宽度之类的东西，也要设置对IE低版本兼容。 如： mete标签意思是不网页不缩放。然后css外链样式是指最低宽度少于多少就调用什么什么css，这就出现一个问题就是要写很多兼容性的css。但也有好处，就是某些不方便自适应的内容通过css进行手动调整。 Pure是我经过测试发现兼容IE低版本的一个框架，其它响应式国外布局有的会在IE8出现叠加等错乱问题。 pure网址：http://purecss.io/ 第一次接触pure呢，比较没头绪。不过经过多次折腾，总算总结出了一套简单使用方法。 第一步： 设置meta 第二步： 引用基础css，就是说，所有引用pure的代码之前，需要引入的一个css 第三步： 引用pure的主css 第四步： 引入你需要的pure的css，这里呢，我们抛砖引玉，只管响应式布局： 好了。 该引用的都引用了。到底该怎么写呢？ 看看官方说的吧： Thirds Thirds Thirds 我们新创建一个网页，加入引用以后，在body里加上这些div。 所有的pure标签应该width都是100%的，通过几分之几来控制布局。（关于具体能做几分只几，请点击http://purecss.io/grids/） pure的网格系统支持5格和24格，主要有两种样式：pure-g和pure-u-* 1、pure-g，网格样式，例如 2、pure-u-*，单元格样式，网格里的内容必须放在网格单元里。例如pure-u-1-2表示单元格占1/2的宽度、pure-u-2-3表示单元格占2/3的宽度 pure-g是说这是一个表格，就相当于table，那表格内的单元格呢？那就是pure-u这里的-1-3指的是 分3列，每列占3分之1. 注意：pure标签所在的div容器不要写其它控制性代码。 好了，我们发现这自动扩展的3列希望有点间距，那么只要在标签内新添加div控制就可以了 Thirds Thirds 有的人好说了，没效果啊，重点来了。 在class里加入 pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 pure-u-1代表宽度最小时会有1个单元显示 pure-u-md-1-2代表宽度达到一定时显示2个 pure-u-lg-1-3代表宽度达到一定时显示3个 目前我是这么理解的，大家可以测试下。 分享一个最近在使用的响应式css框架 Pure,搜素材,soscw.com 分享一个最近在使用的响应式css框架 Pure 标签：style class blog code http tar 原文地址：http://www.cnblogs.com/ytcode/p/3795181.html
"stylesheet" type="text/css" media="screen and (min-width:1000px)" href="css/special1000.css" />
"stylesheet" type="text/css" media="screen and (min-width:1900px)" href="css/special1900.css" />"viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/base-min.css">"stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
"stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
下一篇：php email邮箱正则