1. 程式人生 > >適配手機端的幾種寫法

適配手機端的幾種寫法

1,rem佈局,現在普遍常用的方法

一般ui設計師給的頁面都是640的,所以

document.documentElement.clientWidth/6.4+"px";
專案中,在ps中量的尺寸直接除以100,後面寫rem就可以了。
window.onload=function(){
				//1.首次載入的時候 呼叫動態設定rem的api
				setRemSize();
				window.addEventListener("resize",setRemSize,false);
				function setRemSize(){
				//1.在任何尺寸中都可以獲得rem值
				var _clientWidth=document.documentElement.clientWidth/6.4+"px";
				//將得到的rem值賦值給根元素的font-size
				document.documentElement.style.fontSize=_clientWidth;
				}
		};

2.百分比佈局

這種方法比較古老,做出來的介面在各個解析度的適配上比較不好,例如一個div在解析度為320*568是320px * 100px  在375 * 667 的解析度顯示就是 375px * 100px 效果不是等比拉昇。

3,按照640等比例縮放。

<script type="text/javascript">
			var isios = false;
			! function(userAgent) {
				var screen_w = parseInt(window.screen.width),
					scale = screen_w / 640;
				if(/Android (\d+\.\d+)/.test(userAgent)) {
					var version = parseFloat(RegExp.$1);
					document.write(version > 2.3 ? '<meta name="viewport" content="width=640, initial-scale = ' + scale + ',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi">' : '<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
				} else {
					isios = true;
					document.write('<meta name="viewport" content="width=640, initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi">');
				}
			}(navigator.userAgent);
		</script>