标签：strong 开发 应该 不同的 bsp 方法 还需 space 属性
比如设计稿是按照 IPhone6 的 750px 像素设计的，设计稿上的头部导航条的高度是75px。
那么在 IPhone6 的手机上导航条显示的高度就是75px，在640px像素的手机上显示的高度就应该是(640/750) * 75 = 64px,以此类推，在不同像素手机上元素的大小就是(实际设备大小/设计稿大小)*设计稿上该元素的大小。
而在实际开发中，我们不可能通过这样的计算来设计每一个元素的宽高，因为代价太大。
那么既然一个元素在不同设备上的大小比例等于不同设备之间的比例，显然这里我们需要一个变量，这个变量与设备大小相关，是根据不同设备计算出来的不同的值，元素实际大小 = 一个常量 * 该变量。
常量自然取得是设计稿中的大小，那么答案呼之欲出，变量用的就是css新特性中的REM值，这个属性本身就是一个变量
当然设计rem值的核心就是通过js来根据设备的大小，按照公式计算出html的font-size值
这里介绍两种做法：
淘宝做法
把rem值设为设备大小/10，比如750px的rem=75px;640px的rem=64px,那么设计稿（750px）中一个75px的元素用rem表示就是1rem，由此可以做到在640设备里显示是64px。所以在根据750px的设计稿编写css时，元素的大小就是（设计稿标注大小 / 75(设计稿的rem值)）+ ‘rem‘
但是这种方法的缺点就是有时结果是十分复杂的小数，不便计算
网易做法
接着上述淘宝描述，为了方便计算，我们现在不想让元素的大小还需要除以75这个750px中的rem值，而是想让750px中的rem值是1，也就是说750px设计稿中的rem计算为(750 / 750) = 1,那么当然为了保证别的设备中的rem值能够和750px中的rem值拥有原有的比例关系（也就是实际设备大小 / 设计稿大小），就需要这样计算设备的rem值：(设备大小 / 750)。
如此，就可以在设计元素的大小直接使用设计稿中的大小，但是单位要换为rem。
参考文章：http://www.cnblogs.com/well-nice/p/5509589.html
标签：strong 开发 应该 不同的 bsp 方法 还需 space 属性
原文地址：http://www.cnblogs.com/zhaozhipeng/p/7353318.html
