px、em、rem、%、vw、vh、vm這些單位的區別

simpleapples 發布于2019-08-02 15:08 / 3348人閱讀

摘要：就是像素，也是我們現在經常使用的基本單位，比如常常聽到的電腦像素是的，表示的是水平方向是個像素點，垂直方向是個像素點。視口被均分為單位再舉個例子瀏覽器寬度相對于視口的寬度。等于視口高度的。

1.px

px就是像素，也是我們現在經常使用的基本單位，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。

2.em

em參考物是父元素的font-size，默認字體大小是16px，所以1em不是固定值，因為它會繼承父元素的字體大小

3.rem

rem參考物是相對于根元素，我們在使用時可以在根元素設置一個參考值即可，相對于em使用，減少很大運算工作量，例：html大小為10px，12rem就是120px

4.%

% 是相對于父元素的大小設定的比率，position:absolute;的元素是相對于已經定位的父元素，position：fixed；的元素是相對可視窗口

5.vm

vm相對于視口的寬度。視口被均分為100單位

h1 {
    font-size: 8vw;
}

再舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px

6.vh

vm相對于視口的寬度。視口被均分為100單位

h1 {
    font-size: 8vh;
}

再舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px

總結：

 
 
  1.vw：1vw等于視口寬度的1%。
  2.vh：1vh等于視口高度的1%。

但是使用起來兼容性很差，還是不推薦使用，目前用的很舒服的還是px和rem，

安利一對換算單位的網站，幫助更好的理解現在常用的px/em/rem之間的倍數關系：
http://pxtorem.com/ px 換算 rem

http://pxtoem.com/ px 換算 em

GPU云服務器云服務器應用的是rem單位 px2vw px2rem html 單位vw

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53916.html

<em>pxem>、em、rem、%、vw、vh、vm這些單位的區別

摘要：就是像素，也是我們現在經常使用的基本單位，比如常常聽到的電腦像素是的，表示的是水平方向是個像素點，垂直方向是個像素點。視口被均分為單位再舉個例子瀏覽器寬度相對于視口的寬度。等于視口高度的。 1.px px就是像素，也是我們現在經常使用的基本單位，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。 2.em em參考物是父元素的fo...

xcc3641 2019-08-30 10:58 評論0 收藏0
【CSS練習】IT修真院--練習3-簡單界面

摘要：任務三一個最簡單的移動端頁面今天完成的事情運用布局知識跟隨設計圖進行布局，完成簡單并繼續學習優化讓布局更好適應屏幕變化使用了盒模型及百分比了解區別在中應用圖片處理學習明天計劃的事情深度思考手機分辨率和網頁的區別周末補學任務四計劃及簡單編寫遇任務三、一個最簡單的移動端頁面今天完成的事情運用布局知識跟隨設計圖進行布局，完成簡單Demo并繼續學習優化. 讓布局更好適應屏幕變化(使用...

MrZONT 2019-08-29 15:36 評論0 收藏0
視口相關單位的應用 —— 別說你懂CSS相對單位

摘要：還有視口相關單位，依賴瀏覽器的視口大小來定義長度的。如果你不熟悉視口相關單位的話，在這里簡單介紹一下。筆記視口相關單位對于大多數瀏覽器還是一項比較新的特性，所以當你試圖把這個特性和其他樣式混搭時，有可能會有一些很奇怪的。前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對rel...

lbool 2019-08-29 16:06 評論0 收藏0
CSS中常見的長度單位

摘要：可視區高度單位和可視區寬度單位單位與可視區的高度相關。的值等于可視區高度的。因此會隨著父元素對應的長度值得變化而變化。 px - 像素 px 是 CSS 中最常用的長度單位，可以用來指定字體大小，元素的寬度、高度、邊框、內邊距，外邊距的大小等等, 它是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI px 單位的值必須是整數值與px相關...

rainyang 2019-08-29 12:21 評論0 收藏0