在CSS中,我們可以使用媒體查詢(xún)(media queries)來(lái)獲取屏幕的大小,媒體查詢(xún)是一種條件判斷,用于根據(jù)設(shè)備的特定條件(如寬度、高度、顏色等)來(lái)應(yīng)用不同的樣式。
我們可以使用@media
規(guī)則來(lái)查詢(xún)屏幕寬度:
@media (max-width: 600px) { body { background-color: lightblue; } }
上述代碼表示,如果屏幕寬度小于或等于600像素,那么背景色將變?yōu)榈{(lán)色。
同樣,我們也可以查詢(xún)屏幕高度:
@media (max-height: 400px) { body { background-color: lightgreen; } }
這段代碼表示,如果屏幕高度小于或等于400像素,那么背景色將變?yōu)榈G色。
我們還可以同時(shí)使用@media
規(guī)則來(lái)查詢(xún)屏幕寬度和高度:
@media (max-width: 600px) and (max-height: 400px) { body { background-color: lightcoral; } }
這段代碼表示,如果屏幕寬度小于或等于600像素且高度小于或等于400像素,那么背景色將變?yōu)榈汉魃?/p>
通過(guò)媒體查詢(xún),我們可以輕松地獲取屏幕大小并根據(jù)需要應(yīng)用不同的樣式。