5 css中vh和vw的屬性

2021-08-09 13:57:25 字數 456 閱讀 4754

響應式網頁設計技術很大程度上依賴於比例規則。然而,css比例不總是每個問題的最佳解決方案。css寬度是相對於最近的包含父元素。如果你想使用顯示視窗的寬度或高度而不是父元素的寬度將會怎麼樣?這正是vhvw單位所提供的。

vh等於viewport高度的1/100.例如,如果瀏覽器的高是900px,1vh求得的值為9px。同理,如果顯示視窗寬度為750px,1vw求得的值為7.5px

這些規則表面上看起來有無盡的用途。例如,做乙個佔滿高度的或者接近佔滿高度的幻燈片,可以用乙個非常簡單的方法實現,只要用一行css:

.slide

div

css中vw和vh的知識點

引用文件 週六和同事討論問題時,突然聊到了vw和vh,今天整理了一下vw和vh的一些小知識點吧,日後可以自己複習的時候看看。什麼是viewport?視窗的概念在瀏覽器端指的是瀏覽器的可視區域 而在移動端則相對複雜,它涉及到3個視口 layout viewport 布局視口 visual viewpo...

5 css中的border屬性

zh child 複製 border 簡寫屬性在乙個宣告設定所有的邊框屬性。border 1px solid 000 可拆分為border width 1px 寬度border style solid 樣式 實線 border color 000 顏色 可以看到,寬度 顏色 樣式這個三個屬性的屬性值...

CSS3的vw和vh視口單位

認識視口單位 viewport units 首先,我們要了解什麼是視口。在業界,極為推崇的一種理論是 peter paul koch 江湖人稱 ppk大神 提出的關於視口的 解釋 在桌面端,視口指的是在桌面端,指的是瀏覽器的可視區域 而在移動端較為複雜,它涉及到三個視口 分別是 layout vie...