CSS中px、em、rem、%、vw、vh單位之間的區(qū)別是什么-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)CSS中px、em、rem、%、vw、vh單位之間的區(qū)別是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、兗州ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的兗州網(wǎng)站制作公司

1 、px

px就是pixel（像素）的縮寫，相對長度單位，相對于屏幕分辨率。

2、em

參考物是父元素的font-size，具有繼承的特點。瀏覽器默認(rèn)字體是16px，整個頁面內(nèi)1em不是一個固定的值。

字體大小同樣都是1.5em，但是效果卻截然不同，按照W3C提供的公式，我們可以計算下： class為id1的div字體大小繼承自父元素body：16px*1.5em = 24px class為id2的div字體大小繼承自父元素id1：24px*1.5em = 36px class為id3的div字體大小繼承自父元素id2：36px*1.5em = 54px

3、rem

rem是CSS3新增的一個相對單位，但相對的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

4、%

% 百分比，相對長度單位，相對于父元素的百分比值

元素寬高與字體大小使用區(qū)別：

（1）盡量使用相對尺寸單位

使用相對尺寸單位計量，則在調(diào)整頁面的布局的時候，不需要遍歷所有的內(nèi)部DOM結(jié)構(gòu)，重新設(shè)置內(nèi)部子元素的尺寸大小。如果是隨著父容器或者是整體頁面布局而改變尺寸，則使用%更好，如元素的高度和寬度設(shè)置。

（2）字體尺寸盡量使用em、rem

為了字體大小的可維護(hù)性和伸縮性，推薦使用em，如果存在3層以及3層以上的字體相對尺寸的設(shè)置，可以考慮使用rem。

5、vw和vh

vm、vh、vmin、vmax是一種視窗單位，也是相對單位。它相對的不是父節(jié)點或者頁面的根節(jié)點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似于 1%。 視窗(Viewport)是你的瀏覽器實際顯示內(nèi)容的區(qū)域—，換句話說是你的不包括工具欄和按鈕的網(wǎng)頁瀏覽器。

具體描述如下：

vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）
vh：視窗高度的百分比
vmin：取當(dāng)前Vw和Vh中較小的那一個值
vmax：取當(dāng)前Vw和Vh中較大的那一個值

vh和vw相對于視口的高度和寬度， 1vh 等于1/100的視口高度，1vw 等于1/100的視口寬度 比如：瀏覽器高度900px，寬度為750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px， 很容易實現(xiàn)與同屏幕等高的框。

calc + vm 計算寬度

width: 800px; 
width: -moz-calc(100vm - (2 * 10)px);
width: -webkit-calc(100vm -(2 * 10)px);
width: calc(100vm - (2 * 10)px);

關(guān)于“CSS中px、em、rem、%、vw、vh單位之間的區(qū)別是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享標(biāo)題：CSS中px、em、rem、%、vw、vh單位之間的區(qū)別是什么-創(chuàng)新互聯(lián)
URL分享：http://bm7419.com/article26/disdjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站建設(shè)、定制開發(fā)、網(wǎng)站營銷、標(biāo)簽優(yōu)化、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)