多設備適應的前端開發時代如何字體單位選擇

在作手機web或app的時候，爲適應不一樣屏幕，你可能須要寫不少針對不一樣屏幕大小的css代碼，那麼這個時候咱們若是用固定大小去設置字體的大小就要些不少代碼了。這個時候咱們須要使用相對大小了，這樣該其餘咱們之須要修改指定根元素的值了。css3中也出現新的字體單位rem，在幾乎全部的自適應網頁設計的書籍及文章中都推薦使用em做爲字體單位，甚至推薦你使用em來做爲你全部設置size部分的單位。那麼em和px若是轉換呢？

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

關於這塊的文章不少，別人已經總結的很是好了，這裏不浪費時間些，留下下面網址

CSS中強大的EM

http://www.w3cplus.com/css/px-to-em

px em rem在WEB前端開發中的區別

http://www.qianduanview.com/571.html

自適應網頁設計（Responsive Web Design）

http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 

em和px的轉換圖

 

經常使用的web字體單位

像素（px）

根據顯示器的分辨率來肯定長度，在web應用中多采用該單位；

字體高（em）

表示當前文本的尺寸。如{font-size:2em}是指文字大小爲原來的2倍；瀏覽器默認字體大小爲16px，在沒有設定的狀況下2em=32px

Root em（rem）

rem也是相對單位(rem=root em)很明顯rem是由em變化而來,或者說rem是em的升級版。root em,就是相對於根目錄的em而不是相對於父元素,也就是說,它雖然是絕對值,可是隻是相對於根目錄來講也就是html,它不會隨着其它元素的改變而改變.也就是說,咱們只要設定html的文字大小就能夠了.而不用考慮其它因素.

 

其餘不經常使用web字體單位

點數（pt）

根據windows系統定義的字號大小來肯定長度；

英寸（in）、釐米（cm）和毫米（mm）

根據顯示的實際尺寸來肯定長度。此類單位不隨顯示器分辨率的改變而改變；

12pt字（pc）

即windows系統定義的12字號大小爲單位(1pc=12pt)。該單位前輸入的數字表示字號大小的倍數。如{font-size: 2pc;}表示文字大小爲24pt；

字體x的高（ex）

表示當前字母「x」的高度；