隨著移動設備的普及,越來越多的網站需要自適應不同屏幕大小的設備。CSS的自動適應比例功能可以幫助網頁根據不同的屏幕尺寸自動調整頁面元素的大小和位置。
@media screen and (max-width: 768px) { body { font-size: 16px; } } @media screen and (max-width: 414px) { body { font-size: 14px; } }
在上述代碼中,使用了@media查詢來設定不同屏幕寬度下的字體大小。在屏幕寬度小于等于768px時,字體大小為16px;在屏幕寬度小于等于414px時,字體大小為14px。這樣,在不同屏幕寬度下,頁面元素的大小和位置都會自動適應比例。
除了字體大小,還可以使用CSS的max-width和max-height屬性來控制圖片在不同屏幕寬度下的大小。例如:
img { max-width: 100%; height: auto; }
在上述代碼中,設置圖片的最大寬度為100%,高度自適應比例。
總的來說,利用CSS的自適應比例功能可以幫助網站在不同移動設備上展示更好的用戶體驗。