移動端適配

時間 2019-11-07

標籤移動適配欄目無線简体版

原文原文鏈接

在說具體內容以前，咱們必須瞭解幾個概念，就是：Retina屏、物理像素、設備獨立像素、設備像素比
在CSS中咱們通常使用px做爲單位，須要注意的是，CSS樣式裏面的px和物理像素並非相等的。CSS中的像素只是一個抽象的單位，在不一樣的設備或不一樣的環境中，CSS中的1px所表明的物理像素是不一樣的。在PC端，CSS的1px通常對應着電腦屏幕的1個物理像素，但在移動端，CSS的1px等於幾個物理像素是和屏幕像素密度有關的。css

Retina屏

所謂「Retina」是一種顯示標準，是把更多的像素點壓縮至一塊屏幕裏，從而達到更高的分辨率並提升屏幕顯示的細膩程度。由摩托羅拉公司研發。最初該技術是用於Moto Aura上。這種分辨率在正常觀看距離下足以令人肉眼沒法分辨其中的單獨像素。也被稱爲視網膜顯示屏。html

Retina屏通常在蘋果公司的產品上用的比較多，諸如MacBook、iPad、iPhone等瀏覽器

以MacBook Pro with Retina Display爲例，工做時顯卡渲染出2880x1800個像素，其中每四個像素一組，輸出原來屏幕的一個像素顯示的大小區域內的圖像。這樣一來，用戶所看到的圖標與文字的大小與原來的1440x900分辨率顯示屏相同，但精細度是原來的4倍，但對於特殊元素，如視頻與圖像，則以一個圖片像素對應一個屏幕像素的方式顯示。故不會產生Windows中分辨率提高使屏幕文字與圖像變小，形成閱讀困難的問題。這樣在設計軟件時只需將全部的UI元素的精細度都提升到原來的4倍就能夠既保持了觀看溫馨度，又提升了顯示效果。less

2.物理像素(physical pixel)ide

物理像素又被稱爲設備像素、設備物理像素，它是顯示器（電腦、手機屏幕）最小的物理顯示單位，每一個物理像素由顏色值和亮度值組成。所謂的一倍屏、二倍屏(Retina)、三倍屏，指的是設備以多少物理像素來顯示一個CSS像素，也就是說，多倍屏以更多更精細的物理像素點來顯示一個CSS像素點，在普通屏幕下1個CSS像素對應1個物理像素，而在二倍Retina屏幕下，1個CSS像素對應的倒是4個物理像素（參照上面Retina屏的原理下文田字示意圖理解）。佈局

設備獨立像素(device-independent pixel)

設備獨立像素是咱們寫CSS時所用的像素，它是一個抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。字體

設備像素比(device pixel ratio)

設備像素比簡稱爲dpr，物理像素與設備獨立像素的比例。網站

當這個比率爲1:1時，使用1個設備像素顯示1個css像素。當這個比率爲2:1=2時，使用4(2-2)個設備像素顯示1個css像素。當這個比率爲3:1=3，使用9(3-3)個設備像素顯示1個css像素。idea

這裏要注意，dpr=2,並非物理像素是設備獨立像素的2倍，而是用4個物理像素去表示1個設備邏輯像素應該說1個設備獨立像素是1個物理像素的4倍，由於你4個網物理像素才表明我1個設備獨立像素dpr只表明一個數字比例，不是倍數關係。spa

CSS的1px等於幾個物理像素，除了和屏幕像素密度dpr有關，還和用戶縮放有關係。例如，當用戶把頁面放大一倍，那麼CSS中1px所表明的物理像素也會增長一倍；反之把頁面縮小一倍，CSS中1px所表明的物理像素也會減小一倍。關於這點，在文章後面的1px細線問題部分還會講到。

viewport

viewport就是設備上用來顯示網頁的那一塊區域，但viewport又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。

在默認狀況下，通常來說，移動設備上的viewport都是要大於瀏覽器可視區域的，這是由於考慮到移動設備的分辨率相對於桌面電腦來講都比較小，因此爲了能在移動設備上正常顯示那些傳統的爲桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把本身默認的viewport設爲980px或1024px（也多是其它值，這個是由設備本身決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，由於瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。

這裏要認清三種視口

　1. visual viewport 可見視口，指屏幕寬度
　2. layout viewport 佈局視口，指DOM寬度
　3. ideal viewport 理想適口，使佈局視口就是可見視口即爲理想視口

獲取屏幕寬度(visual viewport)的尺寸：window. innerWidth/Height
獲取DOM寬度(layout viewport)的尺寸：document. documentElement. clientWidth/Height

設置理想視口ideal viewport：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

該meta標籤的做用是讓layout viewport的寬度等於visual viewport的寬度，同時不容許用戶手動縮放，從而達到理想視口。　

　meta[name="viewport"]裏各參數的含義爲：

　　width: 設置layout viewport 的寬度，爲一個正整數，或字符串」width-device」。

　　initial-scale: 設置頁面的初始縮放值，爲一個數字，能夠帶小數。

　　minimum-scale: 容許用戶的最小縮放值，爲一個數字，能夠帶小數。

　　maximum-scale: 容許用戶的最大縮放值，爲一個數字，能夠帶小數。

　　height: 設置layout viewport 的高度，這個屬性對咱們並不重要，不多使用。

　　user-scalable: 是否容許用戶進行縮放，值爲「no」或「yes」。

rem適配

哇卡卡卡，終於說到移動端屏幕適配方案了，可能你們看的想罵娘了，不過別急啊，上面的東西弄不清楚，下面是適配也聽不懂啊

rem是相對於根元素的字體大小的單位，也就是html的font-size大小，瀏覽器默認的字體大小是16px，因此默認的1rem=16px，咱們能夠根據設備寬度動態設置根元素的font-size，使得以rem爲單位的元素在不一樣終端上以相對一致的視覺效果呈現。

事實上 rem是把屏幕等分紅指定的份數，以20份爲例，每份爲 1rem ， 1rem 對應的大小就是 rem基準值，rem作的就是把 rem基準值給<html>的 font-size ，因此若是設備的物理像素寬爲 640px ，分紅20份，那麼 1rem=640px/20=32px , <html>的 font-size爲32px 。

//這段代碼放在head標籤裏面
(function () {
    var html = document.documentElement;
 
    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
    }
 
    window.addEventListener('resize', onWindowResize);
    onWindowResize();
})();

固然，你也能夠分紅30份，40份，60份等等，這個看本身的喜愛了

在咱們實際切圖的時候，對於視覺稿上的元素尺寸換算，只須要元素的原始的px值(即你量的大小) 除以 rem基準值便可。例如設計稿的大小爲640px， rem基準值 = 640px/20 = 32px ，有個元素的大小你量出來是 140px286px* ，那麼換算過來就是：

140px = 140/32 = 4.375rem
286px = 286/32 = 8.9375rem

這樣咱們就能夠用rem來代替像素px了，並且在全部的移動端都是自適應的

這個方法目前是比較好的適配方法，只是rem在計算時很麻煩，有不少小數，這個時候你們能夠試一下用less.js解決rem的小數問題

rem+vw適配

什麼是vw和vh?

vw : 1vw 等於視口寬度的1%
vh : 1vh 等於視口高度的1%
vmin : 選取 vw 和 vh 中最小的那個
vmax : 選取 vw 和 vh 中最大的那個

用視口單位度量，視口寬度爲100vw，高度爲100vh（左側爲豎屏狀況，右側爲橫屏狀況）

例如，在桌面端瀏覽器視口尺寸爲650px，那麼 1vw = 650 * 1% = 6.5px（這是理論推算的出，若是瀏覽器不支持0.5px，那麼實際渲染結果多是7px）

注意：這裏的1%是指佔視口的1%，而不是咱們定義的div的1%

如何利用rem+vw進行屏幕適配呢？咱們以設計稿爲750px爲基準

第一步：設置meta標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

第二步：設置html的font-size大小

html{
    font-size:13.33333333vw
}

爲何font-size=13.33333333vw?

下面分析下原理吧, 上面咱們說了vw表示1%的屏幕寬度,而咱們的設計稿一般是750px的,屏幕一共是100vw,對應750px,那麼1px就是0.1333333vw,。

同時咱們知道rem,rem是相對html元素的字體大小，爲了方便計算,咱們取html的font-size=100px,經過上面的計算結果1px是0.13333333vw,那麼100px就是13.333333vw了

因此，咱們讓1rem=100px=13.333333vw

那麼在項目上就很好地能夠進行使用了

當咱們經過ps測量一個div的大小爲 width:200px,height:137px時，咱們就能夠這樣寫，ps量出來的像素直接除以100，計算小數很方便

div {
  width: 2rem;
  height:1.37rem;
 
 }

是否是相對於前面的rem適配來講，不用去計算小數了呢？

做者：油炸皮卡丘
來源：CSDN
原文：https://blog.csdn.net/im_dogg... 版權聲明：本文爲博主原創文章，轉載請附上博文連接！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。