CSS3的REM設(shè)置字體大小

1.使用rem來設(shè)置Web頁面的字體大邢噶恰；

2.rem是相對于根元素<html>；

3.rem能等比例適配所有屏幕

4.在根元素中定義了一個(gè)基本字體大小為62.5%（也就是10px遮怜。設(shè)置這個(gè)值主要方便計(jì)算，如果沒有

設(shè)置鸿市，將是以“16px”為基準(zhǔn) ）锯梁；

我們來看一個(gè)簡單的代碼實(shí)例：

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*/}

上面的表格藍(lán)色一列是Demo3中頁面的尺寸即碗，頁面是以640的寬度去切的，怎么計(jì)算不同寬度下font-site的值陌凳，大家看表格上面的數(shù)值變化應(yīng)該能明白剥懒。

舉個(gè)例子：384/640 = 0.6，384是640的0.6倍合敦，所以384頁面寬度下的font-size也等于它的0.6倍初橘，這時(shí)384的font-size就等于12px。在不同設(shè)備的寬度計(jì)算方式以此類推蛤肌。

瀏覽器的兼容性:

rem是CSS3新引進(jìn)來的一個(gè)度量單位;

支持的瀏覽器還是蠻多的壁却，比如：Mozilla Firefox 3.6+、Apple Safari 5+裸准、Google Chrome展东、IE9+和

Opera11+。

只是可憐的IE6-8無法兼容炒俱。

移動(dòng)端字體單位font-size選擇px還是rem

對于只需要適配少部分手機(jī)設(shè)備盐肃，且分辨率對頁面影響不大的，使用px即可

對于需要適配各種移動(dòng)設(shè)備权悟，使用rem砸王，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備

html{font-size:10px}@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

@media screen and (min-width:800px){html{font-size:25px}}

?rem的介紹很不足，補(bǔ)充如下：

1峦阁、IE9/IE10在用于偽元素時(shí)或者使用字體簡寫聲明時(shí)不支持rem谦铃；

2、IOS Safari5.0-5.1雖然支持rem榔昔，但是在使用媒體查詢時(shí)不支持rem驹闰。

一個(gè)例子：

p?{font-size:14px;?font-size:.875rem;}

注意：

? ?? ???選擇使用什么字體單位主要由你的項(xiàng)目來決定，如果你的用戶群都使用最新版的瀏覽器撒会，那推薦使用rem嘹朗，如果要考慮兼容性，那就使用px,或者兩者同時(shí)使用诵肛。

在這里為大家提供一個(gè)px,em,rem單位轉(zhuǎn)換工具

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者