Html5移动端网页端适配(js+rem)

业务场景：由于需求是适配两端屏幕，所以刚 开始 想的css用rem写，但是还是会出现字体和布局不会等比缩放的情况，后来找到一种js代码针对根元素去做的缩放配置，加上rem和这个js的设置就能 做到 等比缩放。

下载插件，并修改比例 （如果ui 尺寸 是750就改50 375改25），修改完重启vscode

重启，效果图：

2. 新建一个index.js，把下方代码复制进去,即可使用。

   //适配兼容
   (function (doc, win) {
    console. LOG (doc, win)
    //  VAR  docEle = doc.documentElement;
    const d PR  = Math.min(win.devicePixelRatio, 3),
        scale = 1 / dpr,
        resizeEvent = ' orientation change' in window ? 'orientationchange' : 'resize';

    var recalCulate = function () {
        var docEle = document.documentElement,
            w = docEle.clientWidth,
            num = (w > 750 ? 750 : w) / 750;       // **此时的750就是你设计稿的尺寸
        docEle.style.fontSize = (num * 100).toFixed(1) + 'px';
    };
    recalCulate();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, recalCulate, false);
})(document, window);

到此这篇关于Ht ML 5移动端网页端适配(js+rem)的 文章 就介绍到这了,更多相关Html5移动端网页端适配内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 Html5移动端网页端适配(js+rem) 全部内容，希望文章能够帮你解决 Html5移动端网页端适配(js+rem) 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Html5移动端网页端适配(js+rem)的详细内容...