1. 程式人生 > >移動端完美適配方案

移動端完美適配方案

前言

  • 話不多說,乾貨為主。
  • 本文能讓初學者一步解決適配問題

第一步(font-size)

  • 此步驟主要是設定font-size的大小
  • 此方案是把螢幕寬度設定為3.75rem
  • font-size根據螢幕的寬度變化而變化
(function() {
	var width = window.innerWidth / 375 * 100; //換算1rem的寬度
	document.documentElement.style.fontSize = width + "px";//fontSize的大小
})()
  • 一般UI圖的寬度為375px(iphone 6的螢幕寬度)
  • 假如設計圖上的寬度是200px,則你在寫css就可以寫為2rem

第二步(防止低版本瀏覽器識別不準)

  • 有些低版本瀏覽器(最典型的就是vivo手機,內建的瀏覽器核心特別低,一般不能準確識別到寬度。

html部分

<div class="wrap">
	<div class="rems"></div>
</div>

css部分

*{
    padding: 0;
    margin: 0;
}
html,body{
    width: 100%;
}
.rems{
    width: 1rem;
    height: 1px;
    z-index: -100;
}
.wrap{
    width: 100%;
				
}

 js部分

function remAgain() {
	var width = window.innerWidth / 375 * 100;
	document.documentElement.style.fontSize = width + "px";
	var rems = document.getElementsByClassName("rems")[0];
	if(rems.clientWidth != width && window.innerWidth != 0) {
	document.documentElement.style.fontSize = width / (rems.clientWidth / width) + "px";
    }
}
window.onload=function () {
	setTimeout(function () {
		remAgain();
	},0)
}

總結

  • 以上2步就可以完美解決移動端適配問題
  • 下面是完整程式碼
  • <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<meta http-equiv="pragma" content="no-cache">
    		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    		<meta http-equiv="expires" content="0">
    		<script type="text/javascript">
    			(function() {
    				var width = window.innerWidth / 375 * 100;
    				document.documentElement.style.fontSize = width + "px";
    			})()
    		</script>
    		<style type="text/css">
    			*{
    				padding: 0;
    				margin: 0;
    			}
    			html,body{
    				width: 100%;
    			}
    			.rems{
    			    width: 1rem;
    			    height: 1px;
    			    z-index: -100;
    			}
    			.wrap{
    				width: 100%;
    				
    			}
    		</style>
    	</head>
    	<body>
    		<div class="wrap">
    			<div class="rems"></div>
    		</div>
    	</body>
    	<script type="text/javascript">
    		//計算rem  (相容識別rem不准問題)
    		function remAgain() {
    			var width = window.innerWidth / 375 * 100;
    			document.documentElement.style.fontSize = width + "px";
    			var rems = document.getElementsByClassName("rems")[0];
    			if(rems.clientWidth != width && window.innerWidth != 0) {
    				document.documentElement.style.fontSize = width / (rems.clientWidth / width) + "px";
    			}
    		}
    		window.onload=function () {
    			setTimeout(function () {
    				remAgain();
    			},0)
    		}
    	</script>
    </html>