成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

px、em、rem、%、vw、vh、vm這些單位的區(qū)別

simpleapples / 3362人閱讀

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

1.px

px就是像素，也是我們現(xiàn)在經(jīng)常使用的基本單位，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個(gè)像素點(diǎn)，垂直方向是768個(gè)像素點(diǎn)。

2.em

em參考物是父元素的font-size，默認(rèn)字體大小是16px，所以1em不是固定值，因?yàn)樗鼤?huì)繼承父元素的字體大小

3.rem

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

4.%

% 是相對(duì)于父元素的大小設(shè)定的比率，position:absolute;的元素是相對(duì)于已經(jīng)定位的父元素，position：fixed；的元素是相對(duì)可視窗口

5.vm

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

h1 {
    font-size: 8vw;
}

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

6.vh

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

h1 {
    font-size: 8vh;
}

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

總結(jié)：

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

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

安利一對(duì)換算單位的網(wǎng)站，幫助更好的理解現(xiàn)在常用的px/em/rem之間的倍數(shù)關(guān)系：
http://pxtorem.com/ px 換算 rem

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53916.html

相關(guān)文章

  • <em>pxem>、em、rem、%、vw、vh、vm這些單位的區(qū)別

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

    xcc3641 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)3-簡單界面

    摘要：任務(wù)三一個(gè)最簡單的移動(dòng)端頁面今天完成的事情運(yùn)用布局知識(shí)跟隨設(shè)計(jì)圖進(jìn)行布局，完成簡單并繼續(xù)學(xué)習(xí)優(yōu)化讓布局更好適應(yīng)屏幕變化使用了盒模型及百分比了解區(qū)別在中應(yīng)用圖片處理學(xué)習(xí)明天計(jì)劃的事情深度思考手機(jī)分辨率和網(wǎng)頁的區(qū)別周末補(bǔ)學(xué)任務(wù)四計(jì)劃及簡單編寫遇 任務(wù)三、 一個(gè)最簡單的移動(dòng)端頁面 今天完成的事情 運(yùn)用布局知識(shí)跟隨設(shè)計(jì)圖進(jìn)行布局，完成簡單Demo并繼續(xù)學(xué)習(xí)優(yōu)化. 讓布局更好適應(yīng)屏幕變化(使用...

    MrZONT 評(píng)論0 收藏0

  • 視口相關(guān)單位的應(yīng)用 —— 別說你懂CSS相對(duì)單位

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

    lbool 評(píng)論0 收藏0

  • CSS中常見的長度單位

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

    rainyang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<