笔者按：昨天我们聊了响应式设计，今天接着聊聊布局和单位需要注意的一些规则。
规则：发挥CSS3的能动性，尽量不用JavaScript来动态地计算布局
此条规则针对前端工程师，不要用javascript来计算重要的布局空间。CSS3已经非常强大，多数情况下布局都可以用CSS3一站式解决。页面上JavaScript一般放到底部加载的，CSS则放在头部第一时间内加载。用js来计算布局，页面会发生抖动，体验感极差。
规则：border-box是响应式的精髓
就个人理解，bootstrap3中的精髓就在于box-sizing:border-box，这个属性与百分比单位一同出现在css3之中，如果没有百分比的单位，这个属性本身意义也不大。做移动页面的前端程序员如果不知道这个属性，就是不合格的表现。
这个单位对于UI设计师也意义重大。它与百分比单位的配合就是响应式的灵魂，再怎么强调它的重要性也不为过。
border-box的概念很简单，就是让width属性，从边距开始算起，具体见下图。
默认的box-sizing为content-box：
bootstrap3中将所有元素的box-sizing设为了为border-box：
如果不设置成border-box，有一个元素为布局元素为body的%的宽度，这个元素一旦设置了padding10px。那么就会有20px超出到外部。
规则：善用calc进行布局定位，固定宽度与百分比相配合
此条规则赠送给没有对CSS3进行过思考的前端程序员，也是对上条规则的补充。
规则：用固定长度来表示边距，而不是用百分比
边距永远不要用百分比单位来表示，而是在不同的临界点内用不同的固定大小。它有以下考虑：
l固守大小边距使屏幕大小相差不大的设备之间，看起来差别不大，体验上更友好
l百分比根本做不到一劳永逸，在手机上的5%的边距，放到桌面上是非常大的
l百分比边距会让页面效果与设计稿相差很大，很容易与设计稿有着天壤之别
规则：设计师不要标注rem，只以px为标注单位
photoshop中没有rem概念，设计师也不要标注rem，只要标注px。设计师标注rem是个痛苦的过程，而一些前端工程师甚至对设计师解释rem是什么，然后希望设计中标注rem，这真是对“相互伤害”的诠释！
设计师要不停地用计算机计算rem。假设设计师A设置根部元素字体为12px，现在页面上的主标题为50px，设计师计算到rem是4.6rem，他认为只要精确到3位小数就行了，写成了4.。设计师设计了一个页面，也设置了主标题为50px，并且标成了4.rem，明明是50px的字体，可以复用的属性，在web工程师看来却是两个值，即带来了样式表的冗余，又带来了样式的不统一。如果只标50px，看到两个标注图片，就能抽象出相同点。
不要有rem这个单位在标注之中(这里不是对web前端工程师说不要在css样式表中用rem，切勿混淆)。
规则：宽度一般用百分比标注，高度则要定义固定长度
浏览器的元素的宽高是由外向里计算的，必须要明白html,body的width与height设备为%的含义。
规则：设计师不要在标注中注明css属性
设计师只要将各元素的位置标出来即可，不要写padding,margin,border等css属性，前端工程师对页面的理解与UI设计师的理解根本不一样，标上这些css属性反而会给前端新人带来困惑
规则：前端工程师要理解padding,margin适用场景
水平方向不用margin，垂直方向慎用margin。
理论上水平方向要使用margin的地方，都可以用padding或者绝对定位来解决。
规则：要有max-width，定义网站的最大响应尺寸
再多的配置，也有很多不可控因素，一般还是要定义好网站的最大尺寸，这个值建议选择在px到之内，前者是传统的电脑屏幕尺寸，后者是iMac的最大尺寸。实践过程中，个人建议是px为最大屏幕。在较大的屏幕上，网站元素居中对齐。
规则：用偶数来标注元素
字体、间距、高度一律用偶数来标注，尤其是字体！这一定义可以扩展到所有标注元素上来。（当然，也有些元素是很难的，比如边框宽度）
用偶数标注能增强统一性，元素之间相差1像素是看不出来的，而相当2像素就很容易看出不对劲。用偶数来定义元素，如确保UI上的一致性，由于偶数的间距很大，web工程师很容易就很想到哪些元素可以进行css复用。
可能有人会反驳设计肯定要看效果，应当设计上是多少就应该标成多少，设计师就更应该强调艺术性，而不是工程化、产业化。这一辩论看似很有些道理，实际上却很可笑，1像素的误差就会使艺术打折扣的话，艺术未必也太脆弱了。更敢肯定是——不遵循这一原则，页面会看起来很山寨。
规则：字体大小只用偶数值
这里有很多故事，可以另外开个专题聊聊，首先记住偶数字号相对更容易和web设计的其他部分构成比例关系即可。
文章末尾，把封面图再放大给大家欣赏----Thinkdifferent。
赞赏