如何根据设计图设计rem比例

如何根据设计图设计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。原理如下：

let width = document.documentElement.clientWidth

//。。。fontSize = 100*(width/750)+'px'原来
。。。fontSize = 100*(width/(750/2))+'px'=100*(2*width/750)//现在

竟然之前比例为100：1，那么多除2就变成啦50:1