!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>720&&(n=720);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("domContentLoaded",a,!1))
}(window);

规则就是，调用函数，放两个参数，第一个参数，是设计稿的宽度，第二个参数是px与rem的转换比例，通常会写100（因为好算）；当然了，要把这段js代码最好封装在一个单独的js文件里，并且放在所有的css文件引入之前加载。

其中 var n=t.clientWidth||320;n>720&&(n=720);的意思是:如果clientWidth的值获取不到,n就等于320,如果n>720成立就会执行n=720的操作

M && N中，若M为假，则N不被执行；
M｜｜N中，若M为真，则N不被执行。

上面这段js手机上在有表单的时候,在输入法弹出的时候会失灵

代码一：

(function(win) {
	if(!win.addEventListener) return;
	var html = document.documentElement;

	function setFont() {
		function setRem() {
			var cliWidth = html.clientWidth;
			var w = document.documentElement.clientWidth,
				h = document.documentElement.clientHeight;
			var val = 640;

			if(w >= 640) {
				cliWidth = 640;
			}
			//                        if(w > h) {
			//                            //横屏
			//                            val = 1334;
			//                        }
			html.style.fontSize = 100 * (cliWidth / val) + ‘px‘;
		}
		setRem();
		setTimeout(function() {
			setRem();
		}, 300);

	}
	win.addEventListener(‘resize‘, setFont, false);
	setFont();
})(window);

代码二 ：

//屏幕适应
(function(win, doc) {
	if(!win.addEventListener) return;
	var html = document.documentElement;
	function setFont() {
		var html = document.documentElement;
		var cliWidth = html.clientWidth;
		var k = 640;
		if(cliWidth >= 640) {
			cliWidth = 640;
		}
		html.style.fontSize = cliWidth / k * 100 + "px";
	}
	setFont();
	setTimeout(function() {
		setFont();
	}, 300);
	doc.addEventListener(‘DOMContentLoaded‘, setFont, false);
	win.addEventListener(‘resize‘, setFont, false);
	win.addEventListener(‘load‘, setFont, false);
})(window, document);

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/6350