CSS可以通過媒體查詢獲取當(dāng)前屏幕的大小,<pre>
標(biāo)簽可以用于顯示代碼示例。
@media screen and (min-width: 768px) { /* 當(dāng)屏幕寬度大于等于 768px 時,樣式將被應(yīng)用 */ } @media screen and (max-width: 767px) { /* 當(dāng)屏幕寬度小于等于 767px 時,樣式將被應(yīng)用 */ }
上述代碼中,min-width
和max-width
用于指定屏幕的最小和最大寬度。可以根據(jù)具體需求修改值。
另外,CSS也提供了vw
和vh
單位,可以根據(jù)屏幕大小設(shè)置元素的寬度和高度。
.container { width: 100vw; /* 元素的寬度為屏幕寬度 */ height: 50vh; /* 元素的高度為屏幕高度的一半 */ }
通過以上代碼,元素的寬度將會占滿整個屏幕,而高度將會是屏幕高度的一半。
總之,通過以上方法,我們可以很方便地獲取屏幕大小,并根據(jù)大小設(shè)置相應(yīng)的樣式。