在 CSS 中,設置屏幕寬度的方法主要是通過media
查詢來實現。我們可以使用@media
規則,根據屏幕的寬度來設置不同的樣式。
下面是一個例子:當屏幕寬度小于 600 像素時,將背景顏色設置為紅色。
@media screen and (max-width: 600px) { body { background-color: red; } }
這里使用了max-width
屬性來設置屏幕的最大寬度,當屏幕寬度小于 600 像素時,就會應用這段樣式。
當然,我們還可以使用min-width
屬性來設置屏幕的最小寬度,例如:
@media screen and (min-width: 600px) { body { background-color: blue; } }
這里當屏幕寬度大于等于 600 像素時,就會應用這段樣式。
通過使用media
查詢,我們可以很靈活地設置不同屏幕寬度下的樣式,使網頁在不同設備上都能得到良好的顯示效果。