css - 移动端适配字体

Question

刚开始做移动端有点问题！ 用JS动态计算html的fant-size 可一适配，但是元素的字体怎么设置，用也rem?还是用px? 我用的是px+媒体查询做的适配，但不知道要适配的屏幕有多少种？麻烦解答下！！！ 补充一下 （元素的字体是rem还是px 适配多少种）

Answer 1

雷雷

Answer 2

得用媒體查詢再單獨設定 不然字體會很難看
可以隨便扒個購物站的移動版來看看 裡面已經寫好很多東西

Answer 3

(function (psdWidth){
var r = document.documentElement;
var w = r.clientWidth;
r.style.fontSize = (w > 720 ? 720 : w < 320 ? 3320 ? 33 : w) / psdWidth * 100 + "px";
})(640);

我一直用的是這個。
頁面裡以 1rem = 100px（設計稿裡的尺寸）來換算。
最好在頁面樣式表載入之前先執行，否則先載入css再重算尺寸，頁面會閃爍。

Answer 4

js:
//px轉換為rem的JS

        function change() {
            document.documentElement.style.fontSize = 20 * document.documentElement.clientWidth / 375 + 'px';
        }
        document.addEventListener('DOMContentLoaded', change, false);
        window.addEventListener('resize', change, false);

解釋：我公司的設計圖是750的，我在html中設定font-size:20px;
然後拿到設計稿中的px尺寸除以40再加上rem就是行動端的單位