標籤：尺寸 字型 技術 1.0 等於 UI 無法 meta 影響
1.使用rem來設定Web頁面的字型大小；
2.rem是相對於根項目<html>；
3.rem能等比例適配所有螢幕
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。在不同裝置的寬度計算方式以此類推。
瀏覽器的相容性:
rem是CSS3新引進來的一個度量單位;
支援的瀏覽器還是蠻多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和
Opera11+。
只是可憐的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}}
原連結：https://www.w3cplus.com/css3/define-font-size-with-css3-rem
http://www.tuicool.com/articles/IzuEzuq
CSS3的REM設定字型大小
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
