CSS自適應是一種在不同設備上自動調整網頁布局和樣式的方法。在這里,我們將介紹一般的CSS自適應方法。
@media screen and (max-width: 768px) { /*在寬度小于等于768px的屏幕上應用以下樣式*/ body { font-size: 16px; } .container { width: 90%; margin: 0 auto; } }
在上面的代碼中,我們使用@media查詢將樣式應用于特定的屏幕寬度。我們選擇一個最大寬度值(max-width),如果當前設備的寬度小于或等于這個值,樣式就會被應用。
例如,我們在280px寬的手機屏幕上應用以上樣式,那么body的字體大小會變成16px,.container的寬度會變成90%,并且水平居中。這使得網頁在小屏幕上更易于瀏覽。
總結一下,CSS自適應是為了在不同的設備上呈現(xiàn)最優(yōu)的網頁效果,這可以通過使用@media查詢,在特定的屏幕寬度下應用不同的樣式。這樣的方法可以大大提高用戶體驗。
上一篇css自適應下拉菜單