如何根据设计图设计rem比例
关于图纸
通常UI会给我们的设计图,设计图的宽度一般为750px(像素),也有设计图的宽度为640px
具体操作
我们主要就是根据上面的图纸宽度和手机可视窗口的宽度来设置rem比例
众所周知,rem布局原理是由根元素的font-size值来决定的,通常:font-size=100px=1rem。这是怎么计算的呢?我们简单以750的设计图为例:
我们可以设置一个js文件来处理rem,需要使用rem时调用即可
function rem(){
//根据设备的宽设置html的字体大小
document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5 + "px";
}
rem();
//当窗口改变时,调用方法改变rem比例
window.onresize = rem;
注意:document.documentElement.clientWidth 获取手机可视窗口的宽度
当我们在实际开发的时候,会发现没有750px宽度的机型,这时候我们可以找宽度为375px的机型,然后此时的比例为50px=1rpx。原理如下:
et width = document.documentElement.clientWidth
原来:fontSize = 100*(width/750)+‘px’
现在:fontSize =100*(width/(750/2))+‘px’=100*(2*width/750)
竟然之前比例为100:1,那么多除2就变成啦50:1