移動端完美適配方案
阿新 • • 發佈:2019-01-07
前言
- 話不多說,乾貨為主。
- 本文能讓初學者一步解決適配問題
第一步(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>