• 移动端rem


    移动端内包括微信端: 设置meta标签达到视口的响应式。
    通过rem作单位。来匹配不同型号的手机的适配。
    微信端: 一般设视口为640px。 给html元素设置 font-size:40px; html 内部最大宽度元素最大为16rem或 max-16rem。这样其html内部元素最宽就是
    640px;不会超过视口的宽度。就不会出现滚动条。
    通过js 脚本在html head标签内部最少影响css 重排,重绘的位置。初始就加载这段脚本

    来达到若是视口的宽度小于640的话,就改变html元素的font-size的字体大小的宽度。从而改变html内部元素的宽度。一般视口小于640的,视口减小。html元素
    内部元素的宽度也会减小。达到来适配视口的目的。

    下面是更好的封装
    
    
    (function(win) {
        var remCalc = {};
        var docEl = win.document.documentElement,
                tid;
    
        function refreshRem() {
            // 获取当前窗口的宽度
            var width = docEl.getBoundingClientRect().width;
            // 大于640px 按640算
            if (width > 640) { width = 640 }
            // 把窗口的宽度固定分为16份 也就是16rem
            // 按视觉稿640算  640/16=40px  那么1rem = 40px
            // 640视觉中 80px*80px的按钮 转换为rem  80/40 = 2rem
            // 按钮的宽高固定为 2rem * 2rem
            // 当窗口宽度缩放为 320px的时候
            // 那么 1rem = 20px
            // 原来 80px*80px的按钮现在变为 2rem * 20px = 40px
            // 按钮变为 40px * 40px
            // 其他宽度也类似
            //
            // cms做法也类似
            // 只是我们把窗口宽度固定分为 6.4份,即6.4rem
            // 所以 1rem = 100px
            // 640视觉中 80px*80px的按钮 转换为rem  80/100 = 0.8rem
            // ....其他也差不多
            //
            var rem = width / 16;  
            docEl.style.fontSize = rem + "px";
    
            remCalc.rem = rem;
            //误差、兼容性处理
            var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);
            if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
                var remScaled = rem * rem / actualSize;
                docEl.style.fontSize = remScaled + "px"
            }
        }
    
        //函数节流
        function dbcRefresh() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 100)
        }
    
        //窗口更新动态改变font-size
        win.addEventListener("resize", function() { dbcRefresh() }, false);
    
        //页面显示的时候再计算一次   
        refreshRem();
        remCalc.refreshRem = refreshRem;
        win.remCalc = remCalc
    })(window);
    

    更多比较好的适配可以参考 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
    https://www.w3cplus.com/css/vw-for-layout.html

  • 相关阅读:
    session的一个问题
    (Struts)ActionForm类及表单数据验证
    javaee添加验证码
    struts的上传和下载
    logic标签用法
    jstl标签用法
    bean标签
    /WEB-INF/userManage.jsp(31,82) Unterminated ${ tag
    自定义EL
    jstl
  • 原文地址:https://www.cnblogs.com/koujinshidui/p/7909747.html
Copyright © 2020-2023  润新知