資訊專欄INFORMATION COLUMN
摘要：前言在自適應布局或者移動端網(wǎng)頁開發(fā)時，我們經(jīng)常會用到和兩個長度單位。，相對長度單位。相對于當前對象內(nèi)文本的字體尺寸。所有未經(jīng)調(diào)整的瀏覽器中都是。最大的優(yōu)點是提供一致尺寸，便于計算。為了還原設(shè)計稿和實現(xiàn)合理的布局所以需要根元素重寫。
前言
在自適應布局或者移動端網(wǎng)頁開發(fā)時，我們經(jīng)常會用到em和rem兩個長度單位。接下來我們討論一下這兩個單位和px之間的區(qū)別，以及他們的使用場景等。
區(qū)別 pxpx，像素(計算機屏幕上的一個點)。（引自w3school-css單位）
像素（Pixels），相對長度單位，它是相對于顯示器屏幕分辨率而言的，它兼容性好而且精確，但是這種方法當用戶在縮放瀏覽器或者需要兼容不同移動設(shè)備時，我們的頁面布局可能會被打破。
emem為了解決上述問題而進化產(chǎn)生，也是相對長度單位，根據(jù)使用它的元素的大小決定（有人誤以為是根據(jù)父元素，那是因為使用它的元素繼承了父類的屬性，根據(jù)W3C標準可知 ，它們是基于當前對象元素的字體大小），它可以自動適應用戶所使用的字體。
em，相對長度單位。相對于當前對象內(nèi)文本的字體尺寸。關(guān)于em值的計算
如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸。（引自em-CSS3參考手冊）
假設(shè)任意瀏覽器的默認字體大小都是16px。所有未經(jīng)調(diào)整的瀏覽器中都是1em=16px。為了方便換算，我們通常在css中設(shè)置body的屬性 font-size:62.5%，這就使1em值變?yōu)?0px,這樣我們就可以把設(shè)計稿的px值除以10，然后換上em作為單位來進行px和em的換算，十分簡單，例如16px可以改寫為1.6em。
rem由于em值不是固定的，1em在不同元素下的值會因為該元素或者該元素父元素的大小不同而不同，因此在我們多次使用時，就會帶來開發(fā)的難度。這時候rem(root em)應運而生了。rem是相對于根(html)元素，這就意味著，我們只需要根據(jù)自己的需要給根元素確定一個參考值，然后通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。最大的優(yōu)點是提供一致尺寸，便于計算。
rem，相對長度單位。相對于根元素(即html元素)font-size計算值的倍數(shù)。（引自rem-CSS3參考手冊）根元素重寫
em 和 rem 單位之間的區(qū)別是瀏覽器根據(jù)誰來轉(zhuǎn)化成px值,em是基于當前對象內(nèi)文本的字體尺寸決定，rem是基于html元素的字體大小來決定，而根(html)元素的字體大小如果沒有顯式地設(shè)置固定值去覆蓋，那么它首先來自瀏覽器設(shè)置，因此瀏覽器的字體大小設(shè)置可以影響每個使用rem單元以及每個通過em單位繼承的值。為了還原設(shè)計稿和實現(xiàn)合理的布局所以需要根元素重寫。瀏覽器縮放動態(tài)修改根元素大小可以參考以下代碼段。
同時，也有人認為這種做法在一定程度上剝奪了用戶對瀏覽器字體設(shè)置的權(quán)利，他們的觀點是rem的好處是給了我們的一個途經(jīng)去獲取用戶的偏好來影響網(wǎng)站中每一處使用rem的元素大小，無論用戶如何設(shè)置自己的瀏覽器，我們的布局都能調(diào)整到合適大小。這個就暫不做討論吧，日后有機會再講。
使用場景如果這個屬性根據(jù)它的font-size進行測量，則使用em，其他的使用rem
媒體查詢中使用 rem 單位
不要在多列布局中使用 em 或 rem -改用 %
關(guān)于em和rem在完成模塊化組件中的應用實例，你可以參考這篇文章。
兼容所有瀏覽器都支持px，除了IE8及以下版本，其它的瀏覽器都支持em和rem屬性。對于不支持它的瀏覽器，就多寫一個絕對單位的聲明。
IE9/IE10在用于偽元素時或者使用字體簡寫聲明時不支持rem
IOS Safari5.0-5.1雖然支持rem，但是在使用媒體查詢時不支持rem
工具在這里為大家提供一個px，em，rem單位轉(zhuǎn)換工具。地址：http://pxtoem.com/
討論區(qū)csdn移動端和pc端兩套代碼，兩種字號大小聲明，pc端用了px，沒有根據(jù)瀏覽器縮放自適應，移動端用了rem，根據(jù)屏幕寬度重寫了根元素，實現(xiàn)了自適應。
掘金主頁用了rem，在mac的chrome中根元素固定12px，但是文字大小有根據(jù)瀏覽器縮放實現(xiàn)自適應。
你們團隊是怎么做的？
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116869.html
摘要：關(guān)于與的區(qū)別，網(wǎng)上已經(jīng)有不少文章了，在此不多談。主要想談的是在制作網(wǎng)頁時，什么時候設(shè)定字體大小用，什么時候用先談結(jié)論，再講為什么。一般情況下，還是以用為主，只有當需要在不同設(shè)備上顯示不同大小的字體時，再用。 關(guān)于rem與px的區(qū)別，網(wǎng)上已經(jīng)有不少文章了，在此不多談。主要想談的是：在制作網(wǎng)頁時，什么時候設(shè)定字體大小用px，什么時候用rem？ 先談結(jié)論，再講為什么。一般情況下，還是以用px...
摘要：第一種情況也不討論了，通過斷點適配后，其實你處理的還是第二種情況。至于移動端，支持情況不錯，可以在生產(chǎn)環(huán)境使用。 css中的單位很多，%、px、em、rem，以及比較新的vw、vh等。每個單位都有特定的用途，比如當需要設(shè)置一個矩形的寬高比為16:9，并且隨屏幕寬度自適應時，除了用%，其他單位是很難做到的。所以不存在說某個單位是錯誤的，某個單位是最好的這種說法。 那本文說的頁面適配，指的...
摘要：第一種情況也不討論了，通過斷點適配后，其實你處理的還是第二種情況。至于移動端，支持情況不錯，可以在生產(chǎn)環(huán)境使用。 css中的單位很多，%、px、em、rem，以及比較新的vw、vh等。每個單位都有特定的用途，比如當需要設(shè)置一個矩形的寬高比為16:9，并且隨屏幕寬度自適應時，除了用%，其他單位是很難做到的。所以不存在說某個單位是錯誤的，某個單位是最好的這種說法。 那本文說的頁面適配，指的...
摘要：本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設(shè)置字號，還可以設(shè)置任何盒模型的屬性，比如有一點優(yōu)勢就是可以和媒體查詢配合，實現(xiàn)響應式布局運用場景如果我們做的頁面只在移動端訪問，這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設(shè)計可以讓一個網(wǎng)站同時適配多種設(shè)備和多個屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。...
摘要：本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設(shè)置字號，還可以設(shè)置任何盒模型的屬性，比如有一點優(yōu)勢就是可以和媒體查詢配合，實現(xiàn)響應式布局運用場景如果我們做的頁面只在移動端訪問，這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設(shè)計可以讓一個網(wǎng)站同時適配多種設(shè)備和多個屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。...
閱讀 1627·2021-11-22 14:45
閱讀 1077·2021-11-17 09:33
閱讀 3329·2021-09-02 09:48
閱讀 977·2019-08-30 15:54
閱讀 2775·2019-08-30 15:53
閱讀 2562·2019-08-30 12:54
閱讀 2251·2019-08-29 12:37
閱讀 2430·2019-08-26 13:58
