• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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 dpr = Math.min(win.devicePixelRatio, 3),
            scale = 1 / dpr,
            resizeEvent = 'orientationchange' 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);
    

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

    上一篇:使用HTML和CSS实现的标签云效果(附demo)
    下一篇:关于webview适配H5上传照片或者视频文件的方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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