適配手機端的幾種寫法
阿新 • • 發佈:2019-01-25
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>