cli3 px转rem适配移动端_移动端适配方案（rem的使用）

<!-- 移动端适配解决方案 -->
		<script type="text/jscript">
			function adapt(designWidth, rem2px) {
				var d = window.document.createElement('div');
				d.style.width = '1rem';
				d.style.display = "none";
				var head = window.document.getElementsByTagName('head')[0];
				head.appendChild(d);
				var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
				d.remove();
				document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
				var st = document.createElement('style');
				var portrait = "@media screen and (min-width: " + window.innerWidth + "px) {html{font-size:" + ((window.innerWidth /
					(designWidth / rem2px) / defaultFontSize) * 100) + "%;}}";
				var landscape = "@media screen and (min-width: " + window.innerHeight + "px) {html{font-size:" + ((window.innerHeight /
					(designWidth / rem2px) / defaultFontSize) * 100) + "%;}}"
				st.innerHTML = portrait + landscape;
				head.appendChild(st);
				return defaultFontSize
			};
			var defaultFontSize = adapt(750, 100);
		</script>

注：

设计图为750px,

例子：大小为210px css: 2.1rem

大小为42px css:.42rem

大小为3px css:.03rem