"是自己在借鉴了如今网上很多开源的UI库,再经过自己整理加工的一个简单代码集合。
每个功能块的CSS代码都很少,力求简单易懂,低门槛,代码可根据自己实际情况轻易修改,改到符合自己场景为止。
,
一,制作的理由
之所以重复造轮子,有以下几点原因:
%20%20%20
%20如果不备点存货,那只能加班加点的赶进度。
%20%20<强>%20%20
%20如果碰到挑细节的测试或领导,搞不好就要让你1像素1像素的调界面了。
%20%20%20
%20开发的时候只要关注各个页面中的细节即可,从容的写代码。
%20%20%20
%20正因为比较大,改动的时候就比较费劲。
%20%20%20
%20这样他们设计出来的页面会与那些库不一致,就会出现第4种的情况。
%20%20%20
%20%20CSS3提供了很多新特性,但平时可能都没用的到,不是不想用,而是想不到该如何用,例如伪元素,弹性布局等。
%20%20%20
%20古人说的绝知此事要躬行还是很有道理的。
%20%20%20
%20这里只是分享一下思路,抛钻引玉。
%20%20
,%20
%20二,开发环境
%20现在前端开发与以前不同了,以前只要个带颜色的文本编辑器,一个浏览器即可。
%20现在前端项目也越来越大,也需要管理配置。
%20%20%20
%20本次开发使用了构建工具”,基于流的构建工具。利用”节点。js”丰富的包管理，可以将各种插件收入囊中。
如果不熟悉这个玩意儿，可以参考一下我以前写的一篇小教程《》。
也可以参考库的文档中《》与《》
CSS现在也可以预编译了，就是一种，有了预编译，写CSS也可以模块化开发，并且能够自动打包。
预编译可以使用Gulp中的插件“”，在那篇两教程中有提到过。
还装了浏览器属性兼容插件，rem自动计算插件等。
借助， 通过计算html中的font-size（用于计算rem），设置viewport的放大倍数，来实现移动自适应。
说明的文档库是很有必要的，让人更有感性的认识。
文档库是用编写的，这是一个静态网站生成器，前面一段时间也整理过两篇小教程，《》和《》
三、应用技巧
所有的文件就如上图所示，下面就介绍下CSS的开发过程，新航道托福demo展示页面与文档编辑就直接略过了。
rem（font size of the root element）是指相对于根元素的字体大小的单位。
库中大部分都用了这个单位，这样能做更好的适配。但字体、边框等使用了px单位。
由于要计算，如果手工算的话，那要累成狗了，所以可以使用“Gulp”中的插件“”自动计算。
在做网格之前，曾经看过中的网格代码，就是用float加百分比宽度，或px定宽实现的。
但移动端的话，这么写还不够，移动端的浏览器比PC端的先进，所以可以用更新的CSS3属性来实现。
CSS3中有个弹性布局（Flexible），这是个好东西，可以自动计算宽度的，非常适合手机屏幕。
由于手机屏幕尺寸很多，很多情况下不能写死，即使用百分比，某种角度来说，还是写死的。
弹性布局还有个好处，那就是对齐，我以前碰到过两个字体大小不一样，但是要在同一行底部对齐，当时做起来很费劲。
而使用弹性布局只要一个属性即可，我在这个CSS模块中，封装了多种对齐样式。
