1、為什么要進(jìn)行移動(dòng)端適配？

• 為了適應(yīng)各種移動(dòng)端設(shè)備，完美呈現(xiàn)應(yīng)有的布局效果
• 各種移動(dòng)端設(shè)備，分辨率大小不一致，網(wǎng)頁(yè)想鋪滿整個(gè)屏幕，并在各種分辨率下等比縮放

現(xiàn)在主流的開(kāi)發(fā)思路

• PC端和移動(dòng)端分開(kāi)開(kāi)發(fā)（寫(xiě)兩套代碼）
• 如果想在既能適應(yīng)PC，又能適應(yīng)移動(dòng)端 （響應(yīng)式開(kāi)發(fā) 比較麻煩 寫(xiě)好幾套css）

2、相關(guān)概念

屏幕尺寸

屏幕對(duì)角線的長(zhǎng)度，單位是英寸
1英寸 = 2.54厘米 6*2.54 = 15.24厘米

屏幕分辨率

在橫縱方向上的像素點(diǎn)，單位是px, 1px = 1個(gè)像素點(diǎn)（這里的1像素指的是物理設(shè)備的1個(gè)像素點(diǎn)）
iphone 6 的分辨率是1334750像素，一般是縱向像素橫向像素來(lái)表示一個(gè)手機(jī)的分辨率

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

屏幕上每英寸可以顯示的像素點(diǎn)數(shù)量，單位是ppi
屏幕像素密度與屏幕分辨率有關(guān)

設(shè)備像素 / 物理像素

物理像素： 指的設(shè)備的固定像素（1334*750）
設(shè)備像素： 可以看成計(jì)算機(jī)坐標(biāo)中的一個(gè)點(diǎn)

css像素

• css像素是為了web開(kāi)發(fā)者根據(jù)設(shè)計(jì)圖表示web頁(yè)面上內(nèi)容大小的抽象單位，主要使用在瀏覽器上
• 一個(gè)標(biāo)準(zhǔn)的顯示密度下（普通屏），一個(gè)css像素對(duì)應(yīng)著一個(gè)設(shè)備像素，在頁(yè)面不縮放的情況下，1px的css像素 === 1設(shè)備獨(dú)立像素
• 頁(yè)面放大200%時(shí)，頁(yè)面的設(shè)備獨(dú)立像素依舊不變，放大的是css像素，但是此時(shí)css像素與設(shè)備獨(dú)立像素的關(guān)系變化了 1px === 4獨(dú)立像素

css像素與物理像素的關(guān)系

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

設(shè)備獨(dú)立像素

• 密度無(wú)關(guān)像素，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)程序員使用的虛擬像素（css設(shè)置的像素），然后由相關(guān)設(shè)備轉(zhuǎn)換成物理像素，去顯示對(duì)應(yīng)的大小
• 對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，并不在意一個(gè)css像素到底跨越了多少個(gè)設(shè)備像素，因?yàn)閏ss和js定義的像素本質(zhì)上代表的都是css像素看，如何顯示對(duì)應(yīng)大小依賴于屏幕特性和用戶縮放程度的復(fù)雜計(jì)算交給瀏覽器
• 通過(guò)window.screen.width / window.screen.height 獲取設(shè)備寬高

位圖像素

一個(gè)位圖像素是柵格圖像（png,jpg,gif等）最小的數(shù)據(jù)單元，至少一個(gè)位圖像素對(duì)應(yīng)1個(gè)物理像素，圖片才能完美清晰的展示

像素比（dpr）

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

像素問(wèn)題

因?yàn)椴煌O(shè)備具有不同的dpr+所代表的設(shè)備像素不同，所以在有些設(shè)備上看到的粗，有些設(shè)備看到的細(xì)，如何解決：像素邊框問(wèn)題

方法一： 通過(guò)媒體查詢，查詢?cè)O(shè)備的dpr,根據(jù)dpr設(shè)置不同的寬度大小

#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;
        }
}

缺點(diǎn)：小數(shù)像素目前兼容性較差，一些以前的版本可能不支持,理論上最小的單位是 1px , 所以會(huì)出現(xiàn)有的設(shè)備寫(xiě)0.5px無(wú)效（沒(méi)有邊框）的情況

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

.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的線條縮小為原來(lái)的50%*/
}

缺點(diǎn)：不是所有的設(shè)備的dpr都是2 所以固定縮放0.5也會(huì)有問(wèn)題

方法三：借助媒體查詢和偽元素縮放來(lái)解決

視口

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

視口的設(shè)置：

通過(guò)<meta>標(biāo)簽進(jìn)行設(shè)置，name屬性指定viewport的值，content屬性進(jìn)行視口配置