CSS單位中的vw和vh是相對于視口寬度和高度而言的,即在不同設備上具有不同的值。要計算vw和vh對應的實際尺寸,需要以下公式:
實際尺寸 = 視口尺寸 x 百分比 / 100
其中,百分比是使用vw和vh作為單位的CSS屬性值。
例如,假設視口寬度為1000px,某個元素的寬度為50vw,那么這個元素在實際尺寸上的寬度為:
實際尺寸 = 1000px x 50 / 100 = 500px
同理,如果某個元素的高度為30vh,且視口高度為800px,那么這個元素在實際尺寸上的高度為:
實際尺寸 = 800px x 30 / 100 = 240px
需要注意的是,vw和vh的計算方式是基于整個視口的寬度和高度,而非元素的父元素或頁面的寬度和高度。因此,當視口大小改變時,vw和vh單位對應的實際尺寸也會隨之改變。
上一篇css 實現卡牌反面
下一篇vue循壞對象