CSS中,高度vh及寬度vw單位的換算

CSS3中,新設的高度vh及寬度vw單位是以顯示窗口的viewport作為參考點,
每一個單位就是其相對高度寬度,像320 x 480的顯示窗口中,1vh是4.8px、1vh是3.2px

計算的互換公式如下...

以寬度vw及顯示窗口去取得字型大小為例──

fontSize = viewWidth x screenSize /100

於是在1024寬的顯示中,2vw的文字就是

2 x 1024 / 100 = 20.48 px

經四捨五入後就是20px

於是在640寬的顯示中,2vw的文字就是

2 x 640 / 100 = 12.8px

經四捨五入後就是13px

以字型大小及顯示窗口去取得寬度vw為例──

viewWidth
= fontSize x 100 / screenSize

於是在1024寬的顯示中,16px的文字就是

16 x 100 / 1024 = 1.5625vw

於是在640寬的顯示中,16px的文字就是

16 x 100 / 640 = 2.5vw

以字型大小及顯示窗口去取得寬度vw為例──

screenSize
= fontSize x 100 / viewWidth 

當以2.2vw時的顯示文字是18px

18 x 100 / 2.2 = 818px

當以3vw時的顯示文字是16px

16 x 100 / 3 = 533px

About Author: