移动端自适应字体大小

Posted 2020-10-23 wenxiangxu

设置1rem = 100px

window.addEventListener((‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘), (function() {
                function c() {
                    var html = document.documentElement;
                    html.style.fontSize = 100 * (html.clientWidth / 375) + ‘px‘;
                }
                c();
                return c;
            })(), false);

一种比较普遍的开发约束：

移动端设计稿一般是750为标准，这个时候我们在谷歌浏览器选择 iphone6 （或其它375的屏）手机模式来开发，

因为pc的像素比是1，而iphone6的像素比是2，所以在我们开发过程中拿到的UI像素要除以2，

例如：UI给出的某个元素之间的margin是100px，我们就设置为0.5rem