移动端H5页面 rem 自适应缩放JS代码
王子明
移动端网页 rem 自适应布局 （rem布局 用于解决各种移动端机型H5页面适配问题）
在各种屏幕大小手机上实现自适应效果，用rem单位，根据手机屏幕大小自动改变(包括横屏和竖屏时)：文字大小，图片大小，布局宽度大小等！
什么是rem？
rem是 css3一种新的长度单位。它是相对于html标签的字体大小的单位（注意这里泛指是相对于html中的根元素标签也就是html）。
一般用于在移动端H5页面中解决各种机型适配问题的。
为什么要用rem？
由于在移动端开发时，开发人员为了适配不同的机型，常用mediaQue(媒体查询)依据每种机型写多套适配代码，这种方法是能解决适配问题，但代码量太多了不利于维护。
所以就用rem来解决这个问题（当然现在有很多UI框架、js脚手架、插件等都有多端适配方案这里就不涉及了）。
rem的核心原理：
rem的本质是等比例缩放，一般是基于页面宽度，其核心就在刚打页面时，通过css、js等方式动态改变根元素html标签的font-size 字体大小样式属（因rem是以根元素html标签的font-size大小变化面变化的）。
这里我们是用js方式动态改变根元素html标签的font-size样式属性，这样页面就可以根
实例代码：
;(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) {
return false;
}
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
/*
* 使用说明：
* 750 表示：UI设计稿的宽度（移动端一般都以750为标准，当然这是根据你的设计稿宽是多少，这里就写多少）。
* 100 表示：换算比例，这里写100是为了在根据设计稿写css样式时好计算（如，用PS测量某元素的宽度是100px，那样式就写为width: 1rem，如果是16px 就width: 0.16rem，如果是1px 就width: 0.01rem ）
* rem不仅仅用于设置宽和高，它可以用来设置所有可设置的属性单位大小，如padding: 1.2rem; font-size: 1rem; border-radius: 0.5rem 等等;
* */
};
if (!doc.addEventListener) {
return false;
}
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);注意事项：
这个js文件一定要放在html页面<head>标签中，并且是第1个<script src="./js/rem.js" >标签，不然在打开页面时由于rem.js对html标签的font-size字体大小没还设好，
就会出现闪一下屏的情况！！！
类似资料：