CSS樣式表中的屏幕尺寸是指用于設置網站布局和元素樣式的虛擬尺寸,而非指實際物理尺寸。
CSS使用的屏幕尺寸單位包括px(像素)、em(相對于元素字體大小的倍數)和rem(相對于根元素(即元素)字體大小的倍數)等等。
/* 使用像素設置元素寬度和高度 */ div { width: 100px; height: 50px; } /* 使用 em 設置元素寬度和高度 */ div { width: 10em; height: 5em; } /* 使用 rem 設置元素寬度和高度 */ div { width: 10rem; height: 5rem; }
在設置屏幕尺寸時,也可以使用@media查詢語句來適應不同的屏幕大小和設備類型。
/* 當屏幕寬度小于等于 480px 時,修改body元素的背景顏色 */ @media (max-width: 480px) { body { background-color: #ccc; } } /* 當屏幕寬度大于 780px 時,修改header元素的字體大小 */ @media (min-width: 780px) { header { font-size: 1.5em; } }
總的來說,CSS的設計使得它可以方便地適應不同的屏幕尺寸和設備類型,使得我們可以更好地為用戶提供優質的體驗。