页面布局之“rem简单布局”使用rem来解决页面适配问题真的是太简单了！使用rem来解决页面适配问题真的是太简单了！使用

首先定义一个meta属性

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

然后用js动态设置html的基准值，页面中所有用单位的地方全用rem。以设计稿为准，以1rem = 100px来布局。

var html=document.getElementsByTagName("html")[0];
var rootResize=function(){
	var winClient=document.documentElement.clientWidth;
	var fontSize=winClient<640?(winClient/6.4>50?winClient/6.4:50):100;	
	html.style.fontSize=fontSize+"px";
}
rootResize();
window.onresize=function(){
	rootResize();
}

这里以设计稿宽为640px为例设置。视图范围在320px-640px之间。所以基准值就是50px-100px之间。这样子计算基准值目的是为了方便把设计稿的尺寸转换为rem。直接除以100就可以了。

我们还可以再提炼一下，封装成一个方法

/**
 * 定义rem基准值
 * @param uiWidth 参考设计稿的宽
 * @param ratio rem和px的比例，默认为100。（即1rem = 100px）
 */
export function setRem(uiWidth, ratio = 100) {
    var html = document.getElementsByTagName('html')[0]
    var cWidth =
        document.documentElement.clientWidth || document.body.clientWidth
    html.style.fontSize = (cWidth / uiWidth) * ratio + 'px'
}

页面布局之“rem简单布局”

相关文章：