移動端屏幕適配

移動端 H5 頁面不可遺忘的 meta 標籤 viewport

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

這行代碼的做用是設置視口的寬度（其實就是頁面的寬度）等於設備寬度，頁面不縮放而且也不容許用戶進行縮放。

把一個普通的PC端頁面（未加入上面 meta 標籤的）直接放在手機端訪問是能夠展現徹底的，可是頁面明顯通過縮放。能夠用 alert(document.body.clientHeight) 獲取一下頁面寬度，你會發現，大部分頁面的寬度都是980px。再用alert(window.innerWidth)獲取一下設備寬度，很明顯，手機端自動將980px的頁面縮放到了window.innerWidth的寬度才得以徹底展現。但這不是咱們想要的效果，咱們想要的是未經縮放，以最佳樣式展示的Web頁面。每個移動端頁面都應該首先加入上面這行 meta 標籤，這樣才能確保頁面獲得了最佳的展示形式。

CSS 屏幕適配之媒體查詢(media query)

PC 端經常使用的CSS測量單位是 px，而移動端經常使用的倒是 rem。這樣作的緣由仍然是爲了適配多種屏幕尺寸。怎麼適配呢？首先須要弄清楚rem單位，rem是相對於DOM根元素(也就是)的字體大小的度量單位。好比說咱們設置了 html{ font-size: 16px }，而後給具體的DOM設置 p{ font-size: 2rem; height: 4rem; }，其實就至關於設置了 p{ font-size: 2*16px; height: 4*16px; }，也就是 1rem = 1*(html的fontSize)，2.5rem=2.5*(html的fontSize)。這樣就很清楚了，咱們只須要控制不一樣屏幕尺寸下 html 的 fontSize，頁面上全部使用 rem 度量的DOM的尺寸都會相應改變。好比如下適配代碼：

html{font-size: 18px}
@media only screen and (min-width:360px){html{font-size: 20px!important}}
@media only screen and (min-width:375px){html{font-size: 21px!important}}
@media only screen and (min-width:400px){html{font-size: 22px!important}}
@media only screen and (min-width:414px){html{font-size: 23px!important}}
@media only screen and (min-width:480px){html{font-size: 24px!important}}
@media only screen and (min-width:540px){html{font-size: 26px!important}}
@media only screen and (min-width:640px){html{font-size: 28px!important}}
@media only screen and (min-width:768px){html{font-size: 32px!important}}
@media only screen and (min-width:960px){html{font-size: 36px!important}}
@media only screen and (min-width:1024px){html{font-size: 46px!important}}

上面一塊代碼的意思就是:

1. 屏幕尺寸小於360px時，html 的 fontSize 就是18px；
2. 當屏幕尺寸位於區間 [360px, 375px] 時，html 的 fontSize 就是 20px；
3. 當屏幕尺寸位於區間 [375px, 400px] 時，html 的 fontSize 就是 21px；
4. 以此類推，若是屏幕尺寸大於 1024px 的話，html 的 fontSize 都是46px。

上面CSS媒體查詢是一個區間一個區間地進行適配的，固然也可使用 JS 進行更精細的適配，但歸根結底無非都是經過改變viewport的scale值和根節點html的fontSize值進行總體調整的。

設計師出 2 倍視覺稿，前端還原成 1 倍頁面，是在瞎折騰？

這樣作固然是有緣由的，在解釋這個問題以前，先介紹一些像素小知識。

1. 物理像素（也叫設備像素）
   物理像素是顯示器上最小的顯示單元，電腦、電視、手機、平板這些電子設備的屏幕都是由一個個物理像素點組成的，連點成線，線再成面。在系統的調度下，每個物理像素能夠且僅能夠顯示單獨的顏色值和亮度值。
   好比 iPhone5 的屏幕有 640x1136 個物理像素，注意到了嗎，物理像素的總量其實就是所謂的分辨率。分辨率越高，物理像素點就越多，屏幕上能表現的顏色值就越多，畫面就越細膩。

2. 設備獨立像素（也叫CSS像素，邏輯像素）
   設備獨立像素的學術解釋就是計算機座標系統中的一個點，這個點表明一個能夠由程序使用並控制的虛擬像素，而後由底層系統的程序轉換爲物理像素。怪不得都不喜歡去看這些學術性的解釋，真的是佶屈聱牙，抽象難懂。
   其實在我看來，設備獨立像素就是UI設計師設計工具(如Photoshop)中的像素，而UI設計師一般就在電腦上進行設計做業的，因此設備獨立像素其實就是電腦屏幕上的物理像素。每個設備獨立像素能夠表示一個或多個顏色值和亮度值。
   iPhone5 屏幕的設備獨立像素數量是 320x568，爲何這麼說呢，由於在普通電腦屏幕上，1 個設備獨立像素是對應着 1 個物理像素的，你把 iPhone5 的屏幕貼在電腦屏幕上，那一塊和iPhone5屏幕等大的電腦屏幕區域物理像素數量是多少，沒錯正好是320x568。嘿嘿，明白了吧，設備獨立像素是設計師和前端工程師進行做業時的測量單位。

3. 設備像素比（Device Pixel Ratio）
   DPR 的計算公式以下：
   

   設備像素比 = 設備像素/設備獨立像素        // 在某一方向上，x方向或y方向
   DPR 的意義就是用來表示設備會分配多少個物理像素來展現1個設備獨立像素，通常是DPRxDPR個。好比由公式可計算出 iPhone5 的 DPR 爲 2，那麼 iPhone5 就會分配 2x2=4 個物理像素來展現1個設備獨立像素。

其實如今市面上的不少機型 DPR 都是 2，也所以UI設計師爲移動端所作的設計圖一般是 2 倍圖。爲何這樣作呢，拿iPhone5來講吧，若是設計圖尺寸是320x568也就是等於設備的邏輯像素數量，固然是能夠的，但這樣就浪費了硬件優點了，由於設計圖上的1個CSS像素映射到手機屏幕上，手機屏幕會分配4個物理像素來展現它，很顯然，4個物理像素的顏色值和亮度值都同樣。而若是設計成2倍圖，那就是等於設備的物理像素數量了，設計師能夠盡情發揮，設計更細膩的畫面，手機屏幕也能夠充分發揮出高分辨率的優點。設計成2倍圖會出現一個問題，好比原本一張圖片是但願它在手機上呈現爲 100x100（CSS像素）的尺寸，結果設計師把它設計成200x200（CSS像素）的，若是直接放在手機上，也會呈現 200x200（CSS像素）的，而不是100x100（CSS像素），就會顯得很是大，這時候就輪到前端工程師隆重登場了，前端在還原設計圖時全部尺寸都應該減半，也就是還原成1倍頁面。好比設計圖上的200x200（CSS像素）的尺寸，在頁面上對應地寫成100x100（CSS像素），這樣它在頁面上就會佔據100x100個CSS像素了，手機系統會分配100x100x4個物理像素去展現這100x100個CSS像素，這樣就能夠充分展示設計圖中的色彩信息了。