具体详情请看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大小不一样。