現如今，大多數人都離不開手機，手機上的網頁也逐漸被人們所青睞。但是，手機的屏幕尺寸卻是五花八門，如果網頁只針對某一類手機進行設計，對于其他的手機則會顯示不全，用戶體驗也會受到影響。那么，本文將著重講解手機界面自適應的css。

@media screen and (max-width: 600px){
.selector{
property: value;
}
}

我們可以利用@media適配器查詢，通過設置最大寬度和相應的CSS屬性來根據不同的設備進行自適應。如上述代碼所示，屏幕寬度小于600px時，.selector將使用其中定義的屬性。

而早期主流的方法則為設置標簽中的viewport屬性，以適應不同的設備屏幕：

其中width=device-width意為將頁面寬度設置為設備屏幕寬度，initial-scale=1.0意為設置縮放比例為1:1。

總之，通過對于不同設備的自適應，網頁可以在不同的手機上顯示不同的效果，達到更好的用戶體驗。