視窗是瀏覽器實際顯示內容的區域–換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。這些單位是vw,vh,vmin和vmax。它們都代表到了瀏覽器尺寸的比例和視窗的大小調整產生的規模改變。
比如有乙個1000px(寬)和800px(高)的視窗(viewport)
可以在任何乙個可以使用畫素值的地方使用它們,比如width、height、margin、font-size等。它們將通過視窗大小的調整或旋轉裝置的瀏覽器來重新計算這些值
當需要占用頁面總體高度時,通常如下設計
#elem
然而,除非我們為html和body新增100%的高度,但只是這樣還是不行,因為這樣的**並不優雅而且很有可能會破壞設計的其餘部分,使用vh和vw就變得相當容易了,只需要為高度設定100vh,那它將永遠都是視窗的高度
#elem
這樣會生成完美的全屏影象。
阿里有乙個筆試題 要求將body中的三個div元素橫向平鋪並平分螢幕,縱向充滿整個螢幕。所給的html如下:
實現方法:
body
div
在某些情況下,我們需要的是子元素的大小相對於視窗改變而不是父元素。我們可以使用vw來設定子元素,那麼它會簡單的溢位並採取網頁的全寬
視窗單位也可以在文字中使用。在這個例子中我們使用vw設定字型大小來建立一行css響應式文字
#pargent
#child
文字的大小根據視口寬度的變化而顯示不同的大小
通過設定元素的width、height和margin的視窗單位,可以不使用任何其他技巧來設定居中
這裡有乙個高度為60vh,上下外邊距為20vh的矩形,它們加起來是100vh(60+2*20),使它即便調整視窗大小也可以始終居中。
參考文獻:css中如何使用視窗單位
CSS中如何使用視窗單位
視窗 viewport 單位已經有了好幾年了,但我們並沒有看到它被經常使用。它們現在正在被所有的主流瀏覽器所支援並提供獨特的功能使它在特定情況下非常有用,特別是那些涉及響應式的設計。視窗 viewport 是你的瀏覽器實際顯示內容的區域 換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。這些單位是vw,...
CSS中如何使用視窗單位
視窗 viewport 單位已經有了好幾年了,但我們並沒有看到它被經常使用。它們現在正在被所有的主流瀏覽器所支援並提供獨特的功能使它在特定情況下非常有用,特別是那些涉及響應式的設計。視窗 viewport 是你的瀏覽器實際顯示內容的區域 換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。這些單位是vw,...
CSS3視窗單位vw vh vmin vmax說明
vw vh做為css3中的新單位,已經出來挺久的了,這裡也我個人也做一下詳細的總結。vw vh vmin和vmax是css3中的新單位,是一種視窗單位,也是相對單位。它們的大小都是由視窗大小來決定的,單位1,代表類似於1 具體描述如下 vw 視窗寬度的百分比 vh 視窗高度的百分比 vmin 當前較...