CSS3是現(xiàn)代網(wǎng)頁設(shè)計(jì)中必不可少的一部分，它擁有豐富的選擇器、強(qiáng)大的樣式屬性，還有許多實(shí)用的功能，其中之一就是手機(jī)寬度適配。

@media screen and (max-device-width:xxx){
/* 在此處編寫樣式代碼 */
}

上面的代碼是實(shí)現(xiàn)手機(jī)適配的關(guān)鍵，其中max-device-width表示設(shè)備的最大寬度，xxx表示具體的數(shù)值，通常情況下，可以使用320px或者360px進(jìn)行設(shè)置。

在CSS3中使用媒體查詢可以實(shí)現(xiàn)不同設(shè)備的適配，例如在手機(jī)端，我們可能需要將某些元素的字體大小調(diào)小，或者去掉某些元素的邊框等等。

實(shí)際應(yīng)用中，我們可以通過在head標(biāo)簽中加入meta標(biāo)簽來控制頁面的視口大小：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

這里的device-width表示設(shè)備的寬度為視口寬度，initial-scale表示初始的縮放比例為1.0，也就是不進(jìn)行任何縮放。

在移動(dòng)設(shè)備上，通過設(shè)置viewport的寬度為設(shè)備的寬度并配合使用媒體查詢，可以很好地控制網(wǎng)頁的布局和樣式，從而實(shí)現(xiàn)移動(dòng)設(shè)備友好的頁面。