利用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大小不一样。

猜你喜欢

转载自blog.csdn.net/tao_gis/article/details/81199030