尺寸單位em,rem,vh,vw

2021-07-09 21:57:24 字數 1111 閱讀 7617

這幾天做demo,看了網上教程有用到尺寸單位vh,vw, 這些單位不是很熟悉,所以上網上找了些資料來認識了這些不認識的單位

1.em

在做手機端的時候經常會用到的做字型的尺寸單位

說白了 em就相當於「倍」,比如設定當前的div的字型大小為1.5em,則當前的div的字型大小為:當前div繼承的字型大小*1.5

但是當div進行巢狀的時候,em始終是按照當前div繼承的字型大小來縮放,參照後面的例子。

2.rem

這裡的r就是root的意思,意思是相對於根節點來進行縮放,當有巢狀關係的時候,巢狀關係的元素的字型大小始終按照根節點的字型大小進行縮放。

參照後面給的demo

3.vh

vh就是當前螢幕可見高度的1%,也就是說

height:100vh == height:100%;

但是有個好處是當元素沒有內容時候,設定height:100%該元素不會被撐開,

但是設定height:100vh,該元素會被撐開螢幕高度一致。

4.vw

vw就是當前螢幕寬度的1%

補充一句,當設定width:100%,被設定元素的寬度是按照父元素的寬度來設定,

但是100vw是相對於螢幕可見寬度來設定的,所以會出現50vw 比50%大的情況

最後說一句,以上這些尺寸都是css3中的尺寸單位

低版本的ie就不支援了

沒看懂的同學可以參考這裡的乙個demo

複製貼上儲存成index.html即可在瀏覽器檢視。

祝大家春節快樂!

字型大小 1.2 * 14(父元素body) = 16px

字型大小 1.2 * 16(父元素em) = 20px

字型大小 1.2 * 20(父元素em-son) = 24px

字型大小 1.2 * 14(根節點html) = 16px

字型大小 1.2 * 14(根節點html) = 16px

字型大小 1.2 * 14(根節點html) = 16px

寬:14 * 10 = 140px

高:14 * 10 = 140px

寬:螢幕寬度的50%

高:螢幕高度的50%

前端中幾個單位(em rem vh vw)的區別

在做手機端的時候經常會用到的做字型的尺寸單位 說白了 em就相當於 倍 比如設定當前的div的字型大小為1.5em,則當前的div的字型大小為 當前div繼承的字型大小 1.5 但是當div進行巢狀的時候,em始終是按照當前div繼承的字型大小來縮放,參照後面的例子。這裡的r就是root的意思,意思...

Android 單位和尺寸

在布局檔案中,指定寬高的固定大小有以下幾個常用的單位 1 px 畫素,即螢幕中可以顯示的最小元素單元 2 pt 磅數,1磅 1 72英吋,一般pt作為字型大小的單位 手機的解析度不同,乙個200px的按鈕在低分辨的手機上可能將近佔據滿屏,而在高解析度的手機上可能只佔據螢幕的一半。3 dp 密度無關畫...

關於尺寸適配單位

百分比是最早接觸到的適配單位,依據父元素的尺寸給子元素設定尺寸。缺點 當父元素沒有設定尺寸,高度靠內容撐開時,子元素使用百分比高度為0 em的尺寸參考于父元素的font size屬性 缺點 多層次時,中間某層需要有自己的font size時,後代尺寸會受影響 rem的尺寸參考於根節點的font si...