對於移動端開發而言，為了做到頁面高清的效果，視覺稿的規範往往會遵循以下兩點：
1.首先，選取一款手機的螢幕寬高作為基準(現在一般選取iphone6的375×667)。之前專案中也用到過iphone5的320×568。
2.對於retina螢幕(如: dpr=2)，為了達到高清效果，視覺稿的畫布大小會是基準的2倍，也就是說畫素點個數是原來的4倍（對iphone6而言：原先的375×667，就會變成750×1334）。

viewport（視口）

3個視口

• layout viewport（佈局視口）:CSS初始包含塊的尺寸。CSS中所有以百分比為單位的長度都是根據它推算出來的。如果把移動裝置上瀏覽器的可視區域設為viewport的話，某些網站就會因為viewport太窄而顯示錯亂，所以這些瀏覽器就決定預設情況下把viewport設為一個較寬的值，比如980px，這樣的話即使是那些為桌面設計的網站也能在移動瀏覽器上正常顯示了。ppk把這個瀏覽器預設的viewport
  叫做 layout viewport。
  可以通過document.documentElement.clientWidth來獲取。
• visual viewport（視覺視口,即使用者實際看見的部分）：螢幕上顯示的網頁區域的尺寸，會被縮放影響，可以通過window.innerWidth來獲取。
• ideal viewport（完美視口）:完美適配移動裝置的viewport，它的寬度等於移動裝置的螢幕寬度。有了完美視口，使用者不用縮放和拖動網頁就能夠很好的進行網頁瀏覽。而完美視口需要通過viewport meta標籤來進行相應的設定。

畫素

一個畫素就是計算機螢幕能顯示一種特定顏色的最小區域。螢幕上的畫素越多，同一時間你可以看到的就越多。
裝置物理畫素

裝置螢幕的物理畫素，任何裝置的物理畫素的數量都是固定的。他是顯示裝置中一個最微小的物理部件。每個畫素可以根據作業系統設定自己的顏色和亮度。
CSS畫素:px(裝置獨立畫素)
邏輯畫素，瀏覽器使用的抽象單位(之所以叫抽象單位，是因為其可以根據不同的裝置和不同的關係來變大變小，所以稱為抽象單位)為Web開發者創造的，在CSS和JavaScript中使用的一個抽象的層。px是相對長度單位，相對的是裝置物理畫素(device pixel)
注意：在舊的螢幕上，當縮放程度為100%時，一個CSS畫素等於一個裝置畫素。但當在高密度螢幕上，例如蘋果的視網膜螢幕，一個CSS畫素跨越了多個裝置畫素。如果使用者縮小到足夠的程度，一個CSS畫素會變得明顯比一個裝置畫素小。
舉個例子：
當給一個元素設定width:200px時，到底會發生什麼事情？
這個width為200px的元素跨越了200個CSS畫素。而200個CSS畫素相當於多少個裝置物理畫素取決於螢幕的特性(是否是高密度)和使用者進行的縮放。
使用者放大得越大，一個CSS畫素覆蓋的裝置物理畫素就越多。因此，這個元素不一定會跨越200個裝置物理畫素。例如：在蘋果的視網膜螢幕上，視網膜螢幕的畫素密度是普通螢幕的兩倍，那麼這個元素就跨越了400個裝置物理畫素。如果使用者放大，它將跨越更多的裝置物理畫素。
再比如以iphone6為例：
裝置寬高為375×667，可以理解為裝置獨立畫素(或CSS畫素)。
其dpr為2，根據上面的計算公式，其裝置物理畫素就應該×2，為750×1334。

點陣圖畫素

一個位影象素是柵格影象(如：png, jpg, gif等)最小的資料單元。每一個位影象素都包含著一些自身的顯示資訊(如：顯示位置，顏色值，透明度等)。
理論上：1個位影象素對應於1個物理畫素，圖片才能得到完美清晰的展示。
在普通螢幕下是沒有問題的，但是在retina螢幕下就會出現點陣圖畫素點不夠，從而導致圖片模糊的情況。對於dpr=2的retina螢幕而言，1個位影象素對應於4個物理畫素，由於單個位影象素不可以再進一步分割，所以只能就近取色，從而導致圖片模糊。
所以，對於圖片高清問題，比較好的方案就是兩倍圖片(@2x)。
如：200×300(css pixel)img標籤，就需要提供400×600的圖片。
如此一來，點陣圖畫素點個數就是原來的4倍，在retina螢幕下，點陣圖畫素點個數就可以跟物理畫素點個數形成 1 : 1的比例，圖片自然就清晰了(這也解釋了之前留下的一個問題，為啥視覺稿的畫布大小要×2？)。

螢幕尺寸

螢幕尺寸：指螢幕的對角線的長度，單位是英寸。

裝置畫素比(device pixel ratio)

裝置畫素比簡稱為dpr，其定義了物理畫素和裝置獨立畫素的對應關係。它的值可以按下面的公式計算得到：
裝置畫素比 ＝ 裝置物理畫素 / 裝置獨立畫素
計算公式： 1px = (dpr)^2*dp;
獲得裝置畫素比後，便可得知裝置畫素與CSS畫素之間的比例。當這個比率為1:1時，使用1個裝置畫素顯示1個CSS畫素。當這個比率為2:1時，使用4個裝置畫素顯示1個CSS畫素，當這個比率為3:1時，使用9（3*3）個裝置畫素顯示1個CSS畫素。
在JavaScript中，可以通過window.devicePixelRatio獲取到當前裝置的dpr。而在CSS中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不同dpr的裝置，做一些樣式適配
為什麼iPhone5是320px*586px？
就是因為其dpr = 2
dpr = 2表示一個CSS畫素等於4個物理畫素
所以：640dp*1136dp = 320px*568px

iphone5對外宣稱的640*1136是物理畫素，而我們實際開發中用的px是邏輯畫素。

DPI:印表機每英寸可以噴的墨汁點
PPI(pixel per inch)：螢幕每英寸的畫素數量，即單位英寸內的畫素密度
PPI越高，畫素數越高，影象越清晰。
ppi和dpi是同一個概念，Android比較喜歡使用dpi，IOS比較喜歡使用ppi。
但是可視度越低(小),系統預設設定縮放比越大
Retina屏(高清屏)：dpr都是大於等於2

meta標籤

<meta>標籤有很多種，而這裡要著重說的是viewport的meta標籤，其主要用來告訴瀏覽器如何規範的渲染Web頁面，而你則需要告訴它視窗有多大。
手機瀏覽器是把頁面放在一個虛擬的”視口”（viewport）中，視口可大於或小於手機螢幕的可視區域，一般手機預設viewport大於可視區域。這樣不會破壞沒有針對手機瀏覽器優化的網頁的佈局，使用者可以通過平移和縮放來看網頁的其他部分。
設定頁面視窗自動調整到裝置寬度，並禁止使用者及縮放頁面

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

上述屬性基本含義：

• width=device-width
  用來指定 layout viewport(佈局視口) 的大小,device-width 為裝置的寬度。如果不指定該屬性（或者移除viewport meta標籤），則layout viewport寬度為瀏覽器預設值。如：iPhone為980px。

<meta name="viewport" content="width=device-width" />

這樣一來layout viewport將成為ideal viewport(完美視口)，因為layout viewport寬度與裝置視覺視口寬度一致了。
除此之外，我們還可以通過設定initial-scale=1來實現ideal viewport。

<meta name="viewport" content="initial-scale=1" />

• initial-scale – 初始的縮放比例
• minimum-scale – 允許使用者縮放到的最小比例
• maximum-scale – 允許使用者縮放到的最大比例。1.0表示不縮放
• user-scalable – 使用者是否可以手動縮放,no表示不可以手動縮放
  

忽略將頁面中的數字識別為電話號碼：

<meta name="format-detection" content="telephone=no" />

忽略Android平臺中對郵箱地址的識別:

<meta name="format-detection" content="email=no" />

給頁面設定最大寬度和最小寬度

如果在頁面中我們使用rem結合js動態計算font-size值來實現多螢幕適配，這種方式可以無限適配最大和最小的終端螢幕。但是當螢幕超過一定的尺寸以後還繼續顯示h5頁面的話會給使用者帶來不好的體驗。因此，我們需要給頁面設定最大的寬度和最小寬度。
比如：

{
    max-width:640px;
    min-width:320px;
}

line-height屬性的問題

line-height 的一個主要作用是：使得文字在父級元素中垂直居中。
屬性值：

• normal 預設。設定合理的行間距。
• number 設定數字，此數字會與當前的字型尺寸相乘來設定行間距。
• length 設定固定的行間距。% 基於當前字型尺寸的百分比行間距。
• inherit 規定應該從父元素繼承 line-height 屬性的值。

lineheight屬性很有用，但是也存在一些問題：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>lineheight</title>
    <style type="text/css">
        .box{
            font-size: 100px;
            border: 1px solid red;
            /*line-height: 100%;*/
        }
    </style>
</head>
<body>
<div class="box">我是超大字型</div>
</body>
</html>

從上圖，我們發現字型和父元素上下之間有點小間距。這裡我們可以通過給父元素設定line-height:100%來解決這個問題。
上下的小間距是由於line-height 與 font-size 的計算值之差造成的。當設定為line-height 的值為100%的時候，line-height的值就等於 font-size的尺寸，此時的空白間距為0。

小知識點

撥打電話程式碼：

<a href="tel:1234567890">打電話給:1234567890</a>

發簡訊程式碼：

<a href="sms:1234567890">發簡訊給:1234567890</a>

呼叫手機系統自帶的郵件功能程式碼：

<p><a href="mailto:[email protected]">發電子郵件</a></p>

rem自適應原理

rem是根據html的font-size大小來變化，正是基於這個出發，我們可以在每一個裝置下根據裝置的寬度設定對應的html字號，從而實現了自適應佈局

調整html元素大小的值

有css與js兩種方式
css方式：

html { 
font-size: calc(100vw / 3.75); 
}

除以3.75這裡是以iphone6為設計稿為標準的，100vw表示裝置寬度。為了使得html的字型大小為100px，這樣我們在換算的時候，1px 就是0.01rem，就很方便我們計算。
js方式：
我們只需要監聽resize事件即可

document.documentElement.style.fontSize = document.documentElement.clientWidth/3.75 + 'px';
$(window).on('resize', function() {
   document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
})

為了避免在一些手機瀏覽器上不支援calc，vm這些CSS3新屬性，在實際應用中最好還是使用js方式。