rem自适应布局用法

rem自适应布局用法

原理

css3规定：1rem的大小就是根元素的font-size的值。
通过设置根元素的font-size的大小来控制整个HTML文档内的文字大小、元素宽高、内外边距等。
根据移动设备的宽度大小来实现适应，不同的设备都展示一致的页面效果。

分为三步

一、拿到UI设计原型稿的宽高，如320px / 640px / 750px；
二、增加脚本
以640px设计稿为例：

/* 设置根元素字体大小 */
function getRem() {
    // 获取标签元素
	var html = document.getElementsByTagName("html")[0]; 
	// 获取设备的宽度||后为兼容IE低版本写法
	var oWidth = document.body.clientWidth || document.documentElement.clientWidth; 
	// 设置根元素字体大小   计算出的值 就相当于1rem;为什么？
	// 这就是rem单位的规定 1rem就等于根元素字体大小
	html.style.fontSize = oWidth / 6.4 + "px";
}

/*6.4: 为设计稿宽度640px; 若是750px的设计稿 只需要将6.4改为7.5即可。
 *在手机屏幕宽度与设计稿一致时，
 * 即：oWidth = 750px 那么上面的计算 oWidth / 6.4 + "px" 结果就是100px;  html.style.fontSize = 100px 
 *css3中规定 1rem就对应这的font-size的大小，
 *所以100px = 1rem 这样方便大家将px转化为rem 按照这个比例来设置字体大小、元素宽高、内外边距等的单位为rem;
 *举例：在设计稿中，某一行字体大小为14px,则我们需要在css文件中将对应的字体设置为0.14rem;
 *在设计稿中，某一个元素宽高分别为 100px与20px;则我们需要在css中将对应的宽高设置为1rem与0.2rem;
*/
window.onload = function() {
	/*初始化*/
	getRem();
	/*getRem绑定监听*/
	window.addEventListener("resize", getRem, false);
};

三、css文件中记得都使用rem单位。 关键点：字体大小，元素宽高，内外边距一定是根据设计稿测量得来的。对 是设计稿！ 举例是640px宽的设计稿，