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

You have to use media query and set it separately, otherwise the font will be ugly
You can just take a look at the mobile version of the shopping site, a lot of things have been written in it

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);

This is what I always use.
Convert on the page according to 1rem = 100px (the size in the design draft).
It is best to run it before the page style sheet is loaded, otherwise the page will flash after loading the css first and then recalculating the size.

Answer 4

js:
//JS converted from px to rem

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

Explanation: My company's design drawing is 750, I set font-size:20px in HTML;
Then I get the px size in the design draft divided by 40 plus rem to get the mobile unit