利用rem实现web移动端屏幕适配(弹性布局)

具体详情请看TAT.tennylv的文章：

http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/

对以上文章进行简单的描述总结：

1.rem单位根据html根元素的字体大小（px为单位）进行设定，html默认的字体大小为16px，这时候1 rem = 16 px。（设定html字体为35px,则1 rem = 35 px）

2.我们可以对屏幕中的各元素使用rem设定大小。（如div = 1 rem ,此时div = 35 px）

3.利用JS或者CSS3的@media 查询获取屏幕大小，按照需要修改html字体大小。（如div = 1 rem ， 修改html的字体大小为100px，则div仍为1 rem，但 div = 100px）

 

简单来说，假设所有元素（除了根元素html）都是按照rem大小设定的，修改根元素的字体大小后，在不同屏幕上显示的位置比例是一样，只是px大小不一样。