關於px，em,和rem的理解

2021-10-01 21:07:59 字數 1074 閱讀 3275

如何區分px,em,rem

px在平常的用法中，相信大家更習慣用px來做單位，比如

font-size:


15px;


height:


200px;


width:


200px;
所以對於px,我們都很熟悉。px的單位名稱是畫素，是乙個固定的長度單位，不隨著其他元素的變化而變化；所以，我想要重點說的是em 和rem;

emem是相對單位長度，是用來設定字型大小尺寸的，它是相對於父級元素的單位，會隨著父級元素的屬性變化而變化；若是當前這個屬性有設定字型屬性，就以當前自己字型屬性的大小為標準，若是沒有設定就以父級元素的字型大小尺寸為標準；比如：



我是父級元素


我是子元素


<


/p>


<


/div>


divp
很清楚可以看出，p元素作為子元素font-size=0.5em，所以是0.540px = 20px;又因為p元素自己本身設定了font-size.,所以height化作px等於1020=200px;width等於20* 20=400px; 若是p元素自己本身沒有設定font-size屬性，這時候p元素內1em等於父元素的字型的大小為40px,如下：

p
rem

rem是css3新增的乙個相對長度單位，它的出現是為了解決em的缺點，因為em是相對于父元素字型大小的，若是父元素字型大小改變，那子元素就要全部都重新計算，rem的出現就是解決這個問題;

rem可以理解為root-em，所以他是相對於根元素的，所以只要在html標籤上設定字型大小，文件中的字型大小都會以此為標準。比如：



<


/span>


<


/p>


<


/div>


<


/html>


html 


divp


span
很明顯，以rem做單位，都以根元素html裡設定的font-size:40px;為基數也就是1rem=40px;來計算了；

px,em和rem的區別

三者都是相對長度單位 一 px 畫素 畫素是相對於螢幕顯示器解析度而言的。畫素特點 字型大小被定死，不會因為縮放改變二 em em是相對於當前物件的文字尺寸，如果沒有設定，則相對於瀏覽器的預設字型尺寸 特點 1 em的值不是固定的 2 em的可以繼承父級元素的字型大小 注意 所有瀏覽器的預設字型大小...

px em 和rem之間的區別

背景 px 畫素是相對於顯示器螢幕解析度而言的相對長度單位。pc端使用px倒也無所謂，可是在移動端，因為手機解析度種類頗多，不可能乙個個去適配，這時px就顯得非常無力，所以就要考慮em和rem。em 繼承父級的。假設html的font size預設為16px，body字型大小定義為50 那麼在bod...

px em和rem實戰經驗

在自適應布局或者移動端網頁開發時，我們經常會用到em和rem兩個長度單位。接下來我們討論一下這兩個單位和px之間的區別，以及他們的使用場景等。px，畫素 計算機螢幕上的乙個點 引自w3school css單位 畫素 pixels 相對長度單位，它是相對於顯示器螢幕解析度而言的，它相容性好而且精確，但...