rem之移动端自适应

我不是女神ヾ 2022-12-12 04:46 212阅读 0赞

(function(designWidth, maxWidth) {
        var doc = document,
            win = window;
        var docEl = doc.documentElement;
        var metaEl,
            metaElCon;
        var styleText,
            remStyle = document.createElement("style");
        var tid;
    
        function refreshRem() {
            // var width = parseInt(window.screen.width); // uc有bug
            var width = docEl.getBoundingClientRect().width;
            if (!maxWidth) {
                maxWidth = 540;
            };
            if (width > maxWidth) { // 淘宝做法：限制在540的屏幕下，这样100%就跟10rem不一样了
                width = maxWidth;
            }
            var rem = width * 100 / designWidth;
            // var rem = width / 10; // 如果要兼容vw的话分成10份 淘宝做法
            //docEl.style.fontSize = rem + "px"; //旧的做法，在uc浏览器下面会有切换横竖屏时定义了font-size的标签不起作用的bug
            remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
        }
    
        // 设置 viewport ，有的话修改 没有的话设置
        metaEl = doc.querySelector('meta[name="viewport"]');
        // 20171219修改：增加 viewport-fit=cover ，用于适配iphoneX
        metaElCon = "width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover";
        if(metaEl) {
            metaEl.setAttribute("content", metaElCon);
        }else{
            metaEl = doc.createElement("meta");
            metaEl.setAttribute("name", "viewport");
            metaEl.setAttribute("content", metaElCon);
            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(metaEl);
            }else{
                var wrap = doc.createElement("div");
                wrap.appendChild(metaEl);
                doc.write(wrap.innerHTML);
                wrap = null;
            }
        }
    
        //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
        refreshRem();
    
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(remStyle);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(remStyle);
            doc.write(wrap.innerHTML);
            wrap = null;
        }
    
        win.addEventListener("resize", function() {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);
    
        win.addEventListener("pageshow", function(e) {
            if (e.persisted) { // 浏览器后退的时候重新计算
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
    
        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function(e) {
                doc.body.style.fontSize = "16px";
            }, false);
        }
    })(750, 750);
    
    1rem = 100px(750px设计稿)

原本：借鉴，出处已忘

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue使用rem来实现移动端自适应布局

现在手机屏幕分辨率越来越多，为了适应屏幕不同大小，我们首先要做到的便是页面布局自适应。当然解决方案很多，比如：百分比布局，弹性布局flex，也都能获得不错的效果，这里主要介

缺乏、安全感/ 2023年06月19日 04:21/ 0 赞/ 117 阅读

相关 rem之移动端自适应

(function(designWidth, maxWidth) { var doc = document, win = win

我不是女神ヾ/ 2022年12月12日 04:46/ 0 赞/ 213 阅读

相关 echarts移动端自适应

话说，我也是刚开始接触echarts图表，很多东西都不懂，没法上手操作。这不，在用echarts做图表完成两个后，在意识到一个问题。echarts移动端没有自适应。然后为

系统管理员/ 2022年11月28日 10:33/ 0 赞/ 196 阅读

相关移动端背景图片自适应

移动端背景图片自适应 /兼容安卓手机没有高度导致无法显示背景图片/ body{ width:100vw; height:

绝地灬酷狼/ 2022年10月06日 00:45/ 0 赞/ 255 阅读

相关 h5页面自适应移动端 px2rem

<script> resize() window.onresize = function() { res

超、凢脫俗/ 2022年10月01日 13:57/ 0 赞/ 257 阅读

相关移动端（手机）自适应rem布局

rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web a

淩亂°似流年/ 2022年07月16日 02:10/ 0 赞/ 288 阅读

相关 REM——适合移动开发的自适应方案

文章目录 1.什么是REM 2.REM和EM的区别 3.手机端方案的特点 4.使用JS动态调整REM

傷城~/ 2022年03月15日 15:52/ 0 赞/ 234 阅读

相关 rem自适应手机端布局

通过js根据屏幕设备尺寸的大小，改变根元素的值： <script> var html = document.querySelector("html"); v

比眉伴天荒/ 2022年01月07日 15:05/ 0 赞/ 345 阅读

相关浅谈移动端的自适应问题(响应式、rem/em、利用Js动态实现移动端自适应)

　随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？本

淩亂°似流年/ 2021年10月26日 15:58/ 0 赞/ 451 阅读

相关 rem自适应js

/ 处理字体响应式 / (function (w) { //获取文档 var doc = w.documen

痛定思痛。/ 2021年09月16日 00:48/ 0 赞/ 424 阅读