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

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

1 、px

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

2、em

參考物是父元素的font-size，具有繼承的特點。瀏覽器默認字體是16px，整個頁面內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根元素。通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。

4、%

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

元素寬高與字體大小使用區別：

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

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

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

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

5、vw和vh

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

具體描述如下：

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

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

calc + vm 計算寬度

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

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

分享標題：CSS中px、em、rem、%、vw、vh單位之間的區別是什么-創新互聯
URL分享：http://www.js-pz168.com/article26/disdjg.html

成都網站建設公司_創新互聯，為您提供定制網站、網站建設、定制開發、網站營銷、標簽優化、移動網站建設

廣告

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