px、em、rem

px 是固定的長度單位

em 是父元素的font-size(字體大小)的值，常用來設置首行縮進2em(2字符)

rem 是根節點(html，body)的font-size(字體大小)的值，可以用來做移動端的自適應。

為什么要適配移動端

px像素(pixel)

相對長度單位。相對于顯示器屏幕分辨率而言。PC端使用px倒也無所謂，可是在移動端，因為手機分辨率種類頗多，不可能一個個去適配，這時px就顯得非常無力，所以就要考慮em和rem

em

相對于父節點的font-size，會有一些組合的問題。比如你把body的font-size定義為50%，一般地會是8px。

那么你在body里字體大小就是? 1em=8px

可當你定義了一個div，然后把字體設置成了75%，請問，現在的1em等于多少？

這個時候你會發現，原來他繼承了body的值，現在字體更小了，變成了6px！

因為em是相對于父節點的單位，這么嵌套下去，你要數嵌套層級和比例，你會哭的餓......? (幸好出現了rem)

rem

相對長度單位，指相對于根元素的字體大小的單位。

rem只會相對html的值，不會受到父級的影響，這樣的好處在于：從em里的例子來講，1rem始終會等于8px。

使用的時候不需要重新計算rem此時的大小。

rem因為是css3增加的，所以ie8或以下請無視。

屏幕適配的幾種方法(流式布局、固定寬度、響應式、通過viewport進行縮放、使用rem)

1、流式布局

在頁面布局的時候都是通過百分比來定義寬度，但是高度大都是用px來固定住，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調，這就是流式布局的最致命的缺點

往往只有幾個尺寸的手機下看到的效果是令人滿意的，其實很多視覺設計師應該無法接受這種效果，因為他們的設計圖在大屏幕手機下看到的效果相當于是被橫向拉長來一樣。

流式布局并不是最理想的實現方式，通過大量的百分比布局，會經常出現許多兼容性的問題，還有就是對設計有很多的限制，因為他們在設計之初就需要考慮流式布局對元素造成的影響，只能設計橫向拉伸的元素布局，設計的時候存在很多局限性。

2、固定寬度

把頁面設置成320的寬度，超出部分留白，這樣做視覺，前端設計都挺挺開心，UI再也不用被流式布局限制自己的設計靈感了，前端也不用流式布局。

但是這種解決方案也是存在一些問題，例如在大屏幕手機下兩邊是留白的，浪費了寶貴的可用空間(放幾個廣告也好啊，我錯了...)

還有一個就是大屏幕手機下看起來頁面會特別小，操作的按鈕也很小

3、響應式

響應式這種方式在國內很少有大型企業的復雜性的網站在移動端用這種方法去做，主要原因是工作大，維護性

難，所以一般都是中小型的門戶或者博客類站點會采用響應式的方法從web page到web app直接一步到位，因為這樣

反而可以節約成本，不用再專門為自己的網站做一個web、app的版本。

4、通過viewport進行縮放

以320寬度為基準，進行縮放，最大縮放為320*1.3 = 416，基本縮放到416都就可以兼容iphone6 plus的屏幕了，這個方法簡單粗暴，又高效。

說實話，我覺得他和用接下去我們要講的rem都非常高效，不過有部分同學使用過程中反應縮放會導致有些頁面元素會糊的情況。

5、使用 rem 相對字體

rem 等比例適配所有屏幕，通過js來判斷當前屏幕大小，進而設置html的font-size

代碼里面rem的值就是Ui設計稿上量的px除以100就是你代碼中要寫的rem值。

(function(){

var currClientWidth,

fontValue,

originWidth;

originWidth = 750;//ui設計稿的寬度，一般750或640

__resize();

window.addEventListener('resize', __resize, false);

function __resize() {

currClientWidth = document.documentElement.clientWidth;

if (currClientWidth > 768){

currClientWidth = 768;

}

if (currClientWidth < 320){

currClientWidth = 320;

}

fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);

document.documentElement.style.fontSize = fontValue + '%';

}

})();

// 當前假如當前分辨率是375， 設計稿分辨率是750

// 750/375=0.5

// 比例關系是0.5倍

// 再算一下你要換算1rem等于多少px，

// 假如我要100， 100/16=6.25

// 把這個換算的乘以剛才得出的比例

// 0.5*625=312.5

// 最后還拼接了一個百分號 = 312.5%

// 就是在375分辨率下 1rem = 312.5%

// 312.5% * 16px = 50px

前端設置使用 rem 最經典代碼

下面代碼在是中國平安工作時，身邊的一個同事寫的，兼容性特別好,移動端建議使用。

(function(doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function() {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window)

代碼說明：

docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';

例如：手機豎屏的寬度為 750px，則 fontSize = 50 * (750 / 375) = 100px

像素就可以直接使用rem，比如 font-size: 0.2rem;? 即 font-size: 20px;

rem 做移動端適配

一般長度最好是除得盡的數值，例如40，50。

mimvp blog

var html = document.documentElement;

var htmlWidth = document.documentElement.clientWidth;

//html.style.fontSize = htmlWidth/27+'px'; //如：設計圖1080寬度，將屏幕分為27份，每份為設計圖的40px

html.style.fontSize = htmlWidth/15+'px'; //如：設計圖750寬度，將屏幕分為15份，每份為設計圖的50px

*{

margin: 0;

padding: 0;

list-style: none;

}

.box{

width: 7.5rem; /* 相當于設計圖上的7.5*50px 設置的值=設計圖上的長度/每份的長度 */

height: 2.5rem; /* 相當于設計圖上的2.5*50px */

border: 1px solid #000;

}

代碼說明：

//html.style.fontSize = htmlWidth/27+'px'; // 如：設計圖1080寬度，將屏幕分為27份，每份為設計圖的40px

html.style.fontSize = htmlWidth/15+'px'; ? // 如：設計圖750寬度，將屏幕分為15份，每份為設計圖的50px

width: 7.5rem; ? ? ?? ?/* 相當于設計圖上的7.5*50px ? ? 設置的值=設計圖上的長度/每份的長度 */

height: 2.5rem; ??? ?/* 相當于設計圖上的2.5*50px ?*/

參考推薦：

總結

以上是生活随笔為你收集整理的html手机网站font-size:16em,px、em、rem的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。