1、為什么要進行移動端適配？

• 為了適應各種移動端設備，完美呈現應有的布局效果
• 各種移動端設備，分辨率大小不一致，網頁想鋪滿整個屏幕，并在各種分辨率下等比縮放

現在主流的開發思路

• PC端和移動端分開開發（寫兩套代碼）
• 如果想在既能適應PC，又能適應移動端 （響應式開發 比較麻煩 寫好幾套css）

2、相關概念

屏幕尺寸

屏幕對角線的長度，單位是英寸
1英寸 = 2.54厘米 6*2.54 = 15.24厘米

屏幕分辨率

在橫縱方向上的像素點，單位是px, 1px = 1個像素點（這里的1像素指的是物理設備的1個像素點）
iphone 6 的分辨率是1334750像素，一般是縱向像素橫向像素來表示一個手機的分辨率

屏幕像素密度 / 像素密度 / 屏幕密度

屏幕上每英寸可以顯示的像素點數量，單位是ppi
屏幕像素密度與屏幕分辨率有關

設備像素 / 物理像素

物理像素： 指的設備的固定像素（1334*750）
設備像素： 可以看成計算機坐標中的一個點

css像素

• css像素是為了web開發者根據設計圖表示web頁面上內容大小的抽象單位，主要使用在瀏覽器上
• 一個標準的顯示密度下（普通屏），一個css像素對應著一個設備像素，在頁面不縮放的情況下，1px的css像素 === 1設備獨立像素
• 頁面放大200%時，頁面的設備獨立像素依舊不變，放大的是css像素，但是此時css像素與設備獨立像素的關系變化了 1px === 4獨立像素

css像素與物理像素的關系

• div {width:100px;} 表示占據了100個像素
• 100個像素占據多少個物理像素，取決于屏幕的特征( 是否高密度，像素比)和用戶的縮放行為
• iphone 6 的RetinaHD高清視網膜顯示屏中，因為視網膜的像素密度是普通屏幕的2倍，所以這個div就占了200個設備像素，如果用戶放大，它將占據更多的設備像素，如iphone 6 plus，就會占300個像素

設備獨立像素

• 密度無關像素，可以認為是計算機坐標系中的一個點，這個點代表一個程序員使用的虛擬像素（css設置的像素），然后由相關設備轉換成物理像素，去顯示對應的大小
• 對于開發者來說，并不在意一個css像素到底跨越了多少個設備像素，因為css和js定義的像素本質上代表的都是css像素看，如何顯示對應大小依賴于屏幕特性和用戶縮放程度的復雜計算交給瀏覽器
• 通過window.screen.width / window.screen.height 獲取設備寬高

位圖像素

一個位圖像素是柵格圖像（png,jpg,gif等）最小的數據單元，至少一個位圖像素對應1個物理像素，圖片才能完美清晰的展示

像素比（dpr）

devicePixelRatio指的是物理像素和設備獨立像素的比，即1獨立像素由多少個物理像素渲染
window.devicePixelRatio可查看當前顯示設備的物理像素分辨率與CSS像素分辨率的比率
設備像素比devicePixelRatio = 物理像素 / 獨立像素

像素問題

因為不同設備具有不同的dpr+所代表的設備像素不同，所以在有些設備上看到的粗，有些設備看到的細，如何解決：像素邊框問題

方法一： 通過媒體查詢，查詢設備的dpr,根據dpr設置不同的寬度大小

#box {
    height: 200px;
    border-bottom: 1px solid red;
}
@media screen and ( -webkit-min-device-pixel-ratio: 2) {
    #box {
        border-bottom: 0.5px solid #999;
        }
    }
@media screen and ( -webkit-min-device-pixel-ratio: 3) {
    #box {
        border-bottom: 0.3333333px solid blue;
        }
}

缺點：小數像素目前兼容性較差，一些以前的版本可能不支持,理論上最小的單位是 1px , 所以會出現有的設備寫0.5px無效（沒有邊框）的情況

方法二： 借助偽元素縮放處理

.button:after {
    content: '';
    display: block;
    height: 0;
    border-top: #999 solid 1px;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform: scaleY(0.5);  /*將1px的線條縮小為原來的50%*/
}

缺點：不是所有的設備的dpr都是2 所以固定縮放0.5也會有問題

方法三：借助媒體查詢和偽元素縮放來解決

視口

定義：在移動端viewport視口就是瀏覽器顯示頁面內容的屏幕區域，在viewport中有兩種視口，分別表示為：visual viewport(可視視口)和layout viewport(布局視口)
兩個視口是疊加在一起
visual viewport 固定大小跟屏幕大小相同，可以通過window.innerWidth來獲取
視口默認的寬度是980px,我們可以用meta標簽來調視口看度，此時視口寬度被束縛為320-480之間
現代網頁需要將layout viewport 設置成跟visual viewport相同的大小，方便網頁制作

視口的設置：

通過<meta>標簽進行設置，name屬性指定viewport的值，content屬性進行視口配置