css - 移动端适配字体

Question

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

Answer 1

!function(a,b){var c=a.documentElement,d="orientationchange"in window?"orientationchange":"resize",e=function(){var a=c.clientWidth;a&&(c.style.fontSize=100*(a/750)+"px")};a.addEventListener&&(b.addEventListener(d,e,!1),a.addEventListener("DOMContentLoaded",e,!1))}(document,window);

Answer 2

得用媒体查询再单独设置 不然字体会很难看
可以随便扒个购物站的移动版来看看 里面已经写好很多东西

Answer 3

(function (psdWidth){
var r = document.documentElement;
var w = r.clientWidth;
r.style.fontSize = (w > 720 ? 720 : w < 320 ? 320 : 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就是移动端的单位