問題描述

我設(shè)置了html{

font-size:62.5%; <!-- font-size: 10px;-->

}在iphone6上瀏覽沒有問題，但是當(dāng)我打開web chrome之后，發(fā)覺我的頁面錯(cuò)亂。

我知道用戶瀏覽器最小字體是12px的話，會(huì)無視這條聲明，會(huì)繼續(xù)12px。

即便我用于調(diào)試的瀏覽器設(shè)置了10px也無法保證所有用戶都是如此的。（中文版chrome默認(rèn)最小字號(hào)12px)

那么，我該怎么做才能在瀏覽器最小字號(hào)12px的瀏覽器上，實(shí)現(xiàn) 1rem === 10px 呢？

問題解答

可以用其他瀏覽器測試，一般出的設(shè)計(jì)稿不會(huì)低于12px......

用rem解決手機(jī)站自適應(yīng)的問題，調(diào)試時(shí)不推薦使用chrome瀏覽器的最小字體是12號(hào)，但是在移動(dòng)端頁面字體是可以小於12的，就造成所見非所得的情況。所以推薦用firefox調(diào)試。

設(shè)置為100px

調(diào)整 rem 基準(zhǔn)值

Rem 設(shè)為 20px (125%)好處是不會(huì)出現(xiàn)低于最小字號(hào) (Chrome, etc)，也不會(huì)出現(xiàn)舍入誤差 (采用百分比表示時(shí)的 IE, etc) 此外轉(zhuǎn)到整數(shù)字號(hào)容易。

我一般用tranform:scale(.8,.8);

chrome可以設(shè)置最小字體，如果只是移動(dòng)端，不需要擔(dān)心，小于12px字體兼容很好，如果是PC端建議不要使用小于12px字體

使用-ms-text-size-adjust:none;-webkit-text-size-adjust:none;

小于10px還指望用戶看清嗎？

chrome 設(shè)置最小字體：高級設(shè)置/字符和編碼當(dāng)然了，你能有小于12px字體的需求，應(yīng)該是用在移動(dòng)端的項(xiàng)目，開發(fā)階段在chrome中方便調(diào)試。