CSS -- 字體單位（px、em、rem）

時間 2019-11-12

標籤 css 字體單位 rem 欄目 CSS 简体版

原文原文鏈接

web頁面經常使用記量單位：px、em、rem；css

任意瀏覽器的默認字體都是16px。全部未經調整的瀏覽器都符合: 16px = 1em = 1rem。html

==》在一個CSS選擇器被寫入時，瀏覽器就有了一個「16px」大小的默認渲染字體。此時咱們Web頁面中的<body>就繼承了這個「font-size:16px;」，除非你在CSS樣式中顯式的設置<body>的「font-size」值，來改變其繼承的值。css3

一、px / em / rem 區別、優缺點web

px：相對長度單位 -- 絕對值，是相對於顯示器屏幕分辨率而言的。(引自CSS2.0手冊)；頁面按精確像素展現（方便、一致、穩定、精確）。chrome

存在問題：IE6不支持字體縮放。（字體以px爲單位的網站沒有反應）

描述：當用戶對頁面進行 按Ctrl滾頁面的時候（ctrl+、ctrl-）（縮放瀏覽頁面），頁面結構產生了不可預知的錯亂；
　　　當用戶在瀏覽器中瀏覽咱們製做的Web頁面時，他改變了瀏覽器的字體大小，這時會使用咱們的Web頁面佈局被打破。

em：相對長度單位 -- 相對值，相對於當前對象內文本的字體尺寸（基準點爲父節點字體的大小）。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。(引自CSS2.0手冊)。瀏覽器

　特色：em的值並非固定的；工具

　　　　em會繼承父級元素的字體大小。（相對於其父元素來設置字體大小）。佈局

　　　　（缺點）從新計算那些被放大的字體的em數值。避免字體大小的重複聲明。測試

　存在問題：（重複聲明）-- 在進行任何元素設置，都有可能須要知道他父元素的大小，在咱們屢次使用時，就會帶來沒法預知的錯誤風險。字體

　描述：（例如）在#content中聲明瞭字體大小爲1.2em（12px），則 p 中字體大小就只能是12px（1em），而不是1.2em, 由於此em非彼em，它因繼承#content的字體高而變爲了1em=12px。

rem：既絕對又相對 -- 自己絕對，html相對。(CSS3屬性)。

　特色：CSS3屬性，font size of the root element；

　　　　rem 是相對於根元素<html>，既只需根元素肯定一個參考值。

　存在問題：CSS3屬性，存在兼容性問題。

二、px / em / rem 兼容

px、em：CSS2屬性 全部
rem：CSS3屬性 支持主流Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。 IE6-8不支持

三、px / em / rem 用法

em用法：
　　1. body選擇器中聲明Font-size=62.5%；（Font-size=63%；用於ie6兼容）
　　2. 將你的原來的px數值除以10，而後換上em做爲單位；
　　3. 從新計算那些被放大的字體的em數值。避免字體大小的重複聲明。

　　換算公式： 1 ÷ 父元素的font-size × 須要轉換的像素值 = em值

　　ie問題（詭異的12px漢字）：在完成em轉換時還會發現一個詭異的現象，獲得的12px(1.2em)大小的漢字在IE中並不等於直接用12px定義的字體大小，而是稍大一點。這個問題 Jorux已經解決，只需在body選擇器中把62.5%換成63%就能正常顯示了。緣由多是IE處理漢字時，對於浮點的取值精確度有限。

　　em是相對單位，網頁中的文字能放大和縮小。將行距(line-height)，和縱向高度的單位都用em。保證縮放時候的總體性。

　　彈性佈局樣例：在<body>中設置一個正文文本所需的字體大小，或者設置爲「10px」，至關於（「0.625em或62.5%」），這樣爲了方便其子元素計算。這兩種都是可取的。可是咱們都知道，<body>的默認字體是「16px」，同時咱們也很清楚了，咱們改變了他的默認值，要讓彈性佈局不被打破，就須要從新進行計算，從新進行調整。因此完美的設置是： body {font-size:1em;}
　　　　　但是在那個沒人愛的IE底下，「em」會有一個問題存在。調整字體大小的時候，一樣會打破咱們的彈性佈局，不過還好，有一個方法能夠解決： html {font-size: 100%;}
　　
　　彈性佈局寫法：
　　　　　　html {font-size: 100%;}
　　　　　　body {font-size: 1em;}
　　　　　　#wrap {　　　　　　　　　　
　　　　　　　　width: 46.25em;/*740px ÷ 16 = 46.25em */
　　　　　　　　margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/
　　　　　　　　border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/
　　　　　　}

rem用法：
　　在根元素html 定義基本字體大小爲62.5%（即10px。設置這個值主要方便計算，若是沒有設置，將是以「16px」爲基準）。
　　
　　html { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/ }
　　body { font-size: 1.4rem;/*1.4 × 10px = 14px */ } 
　　h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/ } 
　　p {font-size:14px; font-size:1.4rem;}    /*解決兼容 ：  IE8及以前版本的IE瀏覽器使用14像素 */
　　
兼容問題：對於不支持它的瀏覽器，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。
　　　　　　p { font-size:14px; font-size:.875rem; }  // 順序書寫

其餘：可引入 CSS 預處理工具（Sass、LESS 、Stylus等）自動計算 rem 值。

選擇使用什麼字體單位主要由你的項目來決定，若是你的用戶羣都使用最新版的瀏覽器，那推薦使用rem，若是要考慮兼容性，那就使用px,或者二者同時使用。

五、移動實例：css3中單位px,em,rem,vh,vw,vmin,vmax的區別及瀏覽器支持狀況

　　　　rem在移動端應用可參考淘寶的頁面 http://m.taobao.com (html的font-size經過動態計算獲取)

頁面基準320px(20px),html font-size值的計算：

　　　　var ele=document.getElementsByTagName("html")[0],

　　　　　　size=document.body.clientWidth/320*20;

　　　　ele.style.fontSize=size+"px"

注：需設置meta縮放比1:1

該文中好提到：(另外需注意chrome強制最小字體爲12號，即便設置成 10px 最終都會顯示成 12px，當把html的font-size設置成10px,子節點rem的計算仍是以12px爲基準，因此網上不少文章提到的將html的font-size設爲10方便計算不是那麼可取)。 --- （未測試）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。