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