CSS3的REM設置字體大小

時間 2019-12-01

標籤 css3 css rem 設置字體大小欄目 CSS 简体版

原文原文鏈接

1.使用rem來設置Web頁面的字體大小；css

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

3.rem能等比例適配全部屏幕css3

4.在根元素<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*/}

上面的表格藍色一列是Demo3中頁面的尺寸，頁面是以640的寬度去切的，怎麼計算不一樣寬度下font-site的值，你們看錶格上面的數值變化應該能明白。字體

舉個例子：384/640 = 0.6，384是640的0.6倍，因此384頁面寬度下的font-size也等於它的0.6倍，這時384的font-size就等於12px。在不一樣設備的寬度計算方式以此類推。ui

瀏覽器的兼容性:spa

rem是CSS3新引進來的一個度量單位;scala

支持的瀏覽器仍是蠻多的，好比：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和
Opera11+。3d

只是可憐的IE6-8沒法兼容。

移動端字體單位font-size選擇px仍是rem

對於只須要適配少部分手機設備，且分辨率對頁面影響不大的，使用px便可

對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

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