淘宝 rem 机制入门学习

一 移动设备尺寸多种多样，带来适配难度，有时甚至无从下手。
1 移动设备上的Px 像素不等于设备的物理像素。
iphone 6 作为开发标准设备不等于设备的物理像素。
iPhone 5 物理宽度320
iPhone6s 物理宽度为414
Android 设备物理宽度在iphone设备的宽度范围之内或者附近
物理像素不等于css px像素，因为有retina屏，甚至3倍 retina屏。
retina屏幕 一个物理像素等于两个CSS像素
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
移动端页面，首先必学申明 viewport属性 ，告知页面我们使用设备的宽度等于我们处理页面的整宽度。

二 淘宝flexible 解决方案，所有移动设备全兼容，赞
1 首先，引入
<script src="http://g.tbcdn.cn/mtb/lib-fle...

2会给html标签添加 data-dpr="2" 根据设备添加 屏幕像素比，区分普通屏幕 retina屏幕 3倍retina屏
html font-size会设置为屏幕宽度的十分之一，不同设备不一样，但是都是十分之一。

3 rem 技术方案
所有元素的尺寸大小，边距，行高 等于都是用了rem 相对宽度来表达
整个页面的宽度是 10rem 1rem就等于屏幕宽度十分之一 这样就为不同移动设备页面开发带来了方便的等比缩放能力。所有元素的大小设定都使用针对html标签的font-size 比例来计算。
1rem=html font-size =screen width /10 = flexible.js 提供

三 如何计算元素大小，宽高
1rem = 屏幕宽度/10
在现实之中，设计师是按照750像素宽度来设计页面的。
因为理想的机型是iPhone 6 375dp 物理像素的宽 ，retina屏就是750px(css)
750px=10rem 针对设计稿

我们使用PS 量出的像素/750*10 = 最终的rem
Photoshop像素/75 = em

http://www.w3cplus.com/mobile...