Web移動端適配總結

時間 2019-11-05

標籤 web 移動適配總結欄目 HTML 简体版

原文原文鏈接

一. 1px邊框問題

想必各位不管在面試中，仍是工做中，應該遇到過1px邊框的問題。不知道也不要緊，如今咱們就來複習一下（知道的朋友能夠跳過去看第二部分了）。 1px邊框，顧名思義就是前端畫出1px的線，這裏的1px,指的是屏幕1px大小。那麼屏幕的1px和css中的1px有什麼區別呢？每一個物理像素（也就是屏幕的1px）是圖像顯示的最小單元，css的1px是瀏覽器渲染的基本單位，在普通屏幕下，1px對應1物理像素，在2倍屏、3倍屏下1px分別對應2物理像素、3物理像素。這就比如實驗用的座標紙，假如紙上有10小格（至關於10個物理像素），做圖時把你本身座標系的一個單位用1小格表示，那麼你最終作的圖佔整個座標紙的面積就比較小，把座標系的一個單位用10小格表示，可能整個座標紙只能畫出一部分圖像，但會保留更多細節。在第2種狀況下，同一單位長度的線會是第1種狀況下的10倍長。瀏覽器在高倍屏下渲染也是如此，在2倍屏下畫的是2倍粗的線，3倍屏下畫的是3倍粗的線。javascript

二. 不一樣尺寸的屏幕適配

移動端的屏幕適配，不只僅須要考慮各類尺寸，還要考慮dpr(屏幕像素比，能夠理解爲每px用多少物理像素顯示)，dpr = 2就是2倍屏。一樣是寬爲350px的設備，普通屏看起來正常，2倍屏看起來線條就很粗，你可能用一些hack例如transform縮放、製造陰影模擬邊框，這些多少存在一些問題，若是須要全局都能畫出1px的線呢？咱們只要保證讓1px始終只佔1個物理像素就好了。這裏使用meta標籤的viewport對全局視圖進行縮放。通常是下面這個樣子：css

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
複製代碼

對於2倍屏設置initial-scale=0.5，對於3倍屏設置initial-scale=0.33，所以，咱們還須要在網頁渲染前用腳本經過window.devicePixelRatio獲取dpr,而後將initial-scale設置爲 1/dpr。html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" language="zh-cn-hans">
        <script> (function(){ function resetViewPort (){ var viewport = document.querySelector('meta[name = viewport]'); if(!viewport){ viewport = document.createElement("meta"); var head = document.querySelector("head"); head.insertBefore(viewport,head.firstChild); } var ratio = window.devicePixelRatio||1; var content = 'width=device-width,initial-scale='+ Math.round(100/ratio) / 100 +',maximum-scale=1,user-scalable=no'; viewport.setAttribute("content",content); }; window.addEventListener('DOMContentLoaded',resetViewPort); })() </script>
    </head>
    <body>
    </body>
</html>
複製代碼

至此，全部屏幕下1px都對應1物理像素了，如今咱們只須要考慮不一樣的屏幕尺寸。不過如今問題來了，由於px的長度已經和以前不同了，若是如今還用px描述元素，確定會變小，所以咱們須要用另外一種單位來表示元素。如今讓咱們想一想css除了px外還有那些單位？前端

%
em,rem
vw
...

%通常是相對於父級元素，當有多級嵌套時，就很複雜，很差肯定了，同理，em也有這個缺點。再來看rem，它老是相對於根元素的font-size，根元素是惟一的，只要咱們保證不一樣屏幕下根元素的font-size與屏幕的寬度比例一致，就能獲得同樣的顯示效果。這是個很好的方法，只須要在上面的腳本加幾行代碼就好了，瀏覽器兼容性也很好，不少文章也介紹了這種方案。不過今天，他不是咱們的主角。再來看看vw，1vw表示的是1/100的屏幕寬度，一個寬爲30vw的元素在A設備佔屏幕寬度的30%，在B設備一樣佔屏幕寬度的30%，這不就是咱們想要的嗎？讓咱們來看看vw的兼容性，能夠看出vw幾乎徹底兼容。實際上font-size + rem就是模擬的vw，爲什麼咱們不直接用它呢？java

三. 自動轉換插件

咱們通常是拿着設計稿，根據標註寫尺寸。標註通常是px爲單位，如今寫成以vw爲單位，則須要進行一個轉換。這種換算的工做咱們讓插件來作，不過目前好像沒找到相關postcss插件，因而本身寫了一個——postcss-unify,代碼很簡單隻有20行，就是用正則匹配而後替換，感興趣的你也能夠本身作一個。這裏簡單說一下postcss，它能將css轉化爲js對象便於咱們操做，再將結果轉化成css代碼，在這裏瞭解更多（寫插件的方法在連接裏也有）。git