dafa888会员登录

2019-11-03CSS12980
  • 詳情內容
  • 留言點評

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%看過的人還會看

dafa888会员登录 | 下一页