px、em、rem

px 是固定的長度單位

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

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

為什么要適配移動端

px像素(pixel)

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

em

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

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

可當(dāng)你定義了一個div，然后把字體設(shè)置成了75%，請問，現(xiàn)在的1em等于多少？

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

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

rem

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

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

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

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

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

1、流式布局

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

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

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

2、固定寬度

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

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

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

3、響應(yīng)式

響應(yīng)式這種方式在國內(nèi)很少有大型企業(yè)的復(fù)雜性的網(wǎng)站在移動端用這種方法去做，主要原因是工作大，維護性

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

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

4、通過viewport進行縮放

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

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

5、使用 rem 相對字體

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

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

(function(){

var currClientWidth,

fontValue,

originWidth;

originWidth = 750;//ui設(shè)計稿的寬度，一般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 + '%';

}

})();

// 當(dāng)前假如當(dāng)前分辨率是375， 設(shè)計稿分辨率是750

// 750/375=0.5

// 比例關(guān)系是0.5倍

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

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

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

// 0.5*625=312.5

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

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

// 312.5% * 16px = 50px

前端設(shè)置使用 rem 最經(jīng)典代碼

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

(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 做移動端適配

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

mimvp blog

var html = document.documentElement;

var htmlWidth = document.documentElement.clientWidth;

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

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

*{

margin: 0;

padding: 0;

list-style: none;

}

.box{

width: 7.5rem; /* 相當(dāng)于設(shè)計圖上的7.5*50px 設(shè)置的值=設(shè)計圖上的長度/每份的長度 */

height: 2.5rem; /* 相當(dāng)于設(shè)計圖上的2.5*50px */

border: 1px solid #000;

}

代碼說明：

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

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

width: 7.5rem; ? ? ?? ?/* 相當(dāng)于設(shè)計圖上的7.5*50px ? ? 設(shè)置的值=設(shè)計圖上的長度/每份的長度 */

height: 2.5rem; ??? ?/* 相當(dāng)于設(shè)計圖上的2.5*50px ?*/

參考推薦：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。