CSS3是現代網頁設計中必不可少的一部分，它擁有豐富的選擇器、強大的樣式屬性，還有許多實用的功能，其中之一就是手機寬度適配。

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

上面的代碼是實現手機適配的關鍵，其中max-device-width表示設備的最大寬度，xxx表示具體的數值，通常情況下，可以使用320px或者360px進行設置。

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

實際應用中，我們可以通過在head標簽中加入meta標簽來控制頁面的視口大?。?/p>

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

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

在移動設備上，通過設置viewport的寬度為設備的寬度并配合使用媒體查詢，可以很好地控制網頁的布局和樣式，從而實現移動設備友好的頁面。