CSS3提供了一種新的長度單位——視口寬度（vw），可以用來實現手機自適應的效果。

@media (max-width: 600px) {
/* 當屏幕寬度小于600px時執行以下樣式 */
body {
font-size: 14px;
}
.container {
width: 90vw;
}
}

在上面的代碼中，我們使用了@media媒體查詢來判斷屏幕寬度是否小于600px，如果是，就會執行其中的樣式。其中body的字體大小被設置為14px，.container的寬度被設置為屏幕寬度的90%。也就是說，當屏幕寬度小于600px時，.container的寬度會根據屏幕寬度自適應調整。

除了寬度，vw還可以用來設置其他的樣式屬性，如字體大小、內邊距、邊框等等。

.element {
font-size: 5vw;
padding: 2vw;
border: 1vw solid #ccc;
}

在上面的代碼中，.element的字體大小被設置為屏幕寬度的5%，內邊距和邊框的寬度也分別使用了vw單位。這樣做可以確保頁面在不同的屏幕尺寸下都能保持比例協調，達到更好的用戶體驗。