css3新單位vw、vh、vmin、vmax該怎么用?

2018-10-04CSS8640
  • 詳情內容
  • 留言點評

css樣式中表示大小和寬高的單位主要有px pt em ex ch rem vw vh vmin vmax cm mm in pc %等十多種,按照各自特點大致可分為“絕對單位”、“相對單位”和“百分比單位”。

絕對單位:px in cm mm,分別代表像素、英寸、厘米、毫米,通常情況下1in=2.54cm=25.4mm=72pt=6pc=96px;

相對單位:em rem  pt pc ex ch,分別代表相對字號、根字號(JS實現移動端適配字體根字號rem)、磅(1pt=1/72in)、派卡12點活字 (1pc=12pt)、字號半高、數字0寬,后3種一般不常用;

百分比單位:vw vh vmin vmax %,分別代表可視窗口寬(1vw=1/100窗寬)、可視窗口高(1vh=1/100窗高)、視窗寬高相對較小值、視窗寬高相對較大值、百分比,此類單位在移動端響應式布局中越來越常用;

今天益吾庫主要和大家分享一下vw、vh、vmin、vmax這幾種css3中的新單位知識,它們都是百分比單位,其中vmin、vmax是由非標準單位vm進化而來。vh等于網頁瀏覽器可視窗口(viewport)高度的1/100。例如,如果瀏覽器的高是900px,1vh求得的值為9px。同理,如果顯示窗口寬度為750px,1vw求得的值為7.5px。下面我們來做詳細介紹:

1,vw、vh、vmin、vmax具體含義

(1)vw、vh、vmin、vmax都是視窗單位,既是相對單位也是類百分比單位。它相對的不是父節點或者頁面的根節點,而是由視窗(Viewport)大小來決定的,單位1,代表類似于 1%。視窗(Viewport)是你的瀏覽器實際顯示內容的區域,換句話說就是瀏覽器顯示網頁的區域。

(2)具體描述如下:

vw:視窗寬度的百分比(1vw 代表視窗的寬度為 1%)

vh:視窗高度的百分比

vmin:當前 vw 和 vh 中較小的一個值

vmax:當前 vw 和 vh 中較大的一個值

2,vw、vh 與 % 百分比的區別

(1)% 是相對于父元素的大小設定的比率,vw、vh 是視窗大小決定的。

(2)vw、vh 優勢在于能夠直接獲取高度,而用 % 在沒有設置 body 高度的情況下,將無法正確獲得可視區域的高度,所以這是一種不錯的優勢。

3,vmin、vmax 用處

做移動頁面開發時,如果使用 vw、wh 設置字體大小(比如2vw),在豎屏和橫屏狀態下顯示的字體大小是不一樣的。

由于 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax,使得文字大小在橫豎屏下保持一致。

4,瀏覽器兼容性

(1)桌面 PC

Chrome:自 26 版起就完美支持(2013年2月)

Firefox:自 19 版起就完美支持(2013年1月)

Safari:自 6.1 版起就完美支持(2013年10月)

Opera:自 15 版起就完美支持(2013年7月)

IE:自 IE10 起(包括 Edge)到現在還只是部分支持(不支持 vmax,同時 vm 代替 vmin)

(2)移動設備

Android:自 4.4 版起就完美支持(2013年12月)

iOS:自 iOS8 版起就完美支持(2014年9月)

1210235-20170918162831821-1344168854.jpg

歡迎點評!也可以是問題反饋和建議

支持Ctrl+Enter提交
暫無留言,快搶沙發!
0

真心很贊,必須打賞!嗯,以資鼓勵~

點此打賞

99%看過的人還會看

海南环岛赛彩票奖金