rem适配

rem如何设置

1rem等于页面中设置的html标签的字体大小,即可以自由设置,但为了更好计算,通常设计如下:

	var baseSize = 100;//计算倍数,通常取100,好算些
    var designWidth= 750;//设计稿宽度
    var fontSize = (document.documentElement.clientWidth/designWidth*baseSize).toFixed(2);//font-size最好不要小于10px,有些浏览器不支持
    document.getElementsByTagName("html")[0].style.fontSize = fontSize+"px";

px转rem

将设计图的px值转化为rem,只需把(?)px/100
比如,设计图中 50 px,则转化为 50/100 即 0.5 rem.

说明

如下为不成熟的个人理解,如有错误,请见谅

以 iphone 6 为例
解释1:举例法
如果设计图是750px(2倍图)
在设计图中的50px,应该在设备中显示成25px
而1rem=50px,转化为rem就是25/50=0.5rem
所以,直接用50/100=0.5rem就可以计算出来了

解释2:理解法
由fontSize计算方法,得知1rem即设计图中100px在设备中显示的px值为多少
要计算设计图中某个内容宽度是多少rem,就需要计算图中宽度为几个100px,因此,直接用设计宽度/100即可

解释3:公式法
fontSize = clientWidth / designWidth * baseSize
-----》1rem = clientWidth / designWidth * 100
-----》designWidth * 1rem = clientWidth * 100
-----》(designWidth / 100) rem = clientWidth
-----》clientWidth = (designWidth / 100) rem
clientWidth :设备上显示的大小
designWidth :设计图中的大小

你可能感兴趣的:(html5,css,css3,javascript)