zoukankan      html  css  js  c++  java
  • webapp新体验Rem实现移动端网页适配详解资源

      本来想写一篇,webapp使用Rem的问题,查了一下相关rem的介绍之后,发现很多平台已经解释的很清楚了,图文并茂,于是我便想将其解释资源整理一些,方便以后自己查阅。

       腾讯ISUX:web app变革之rem(解释的最精辟了)

       大漠博客:CSS3的REM设置字体大小 

       小黑成长录:关于webapp中的文字单位的一些捣腾

       前端观察站:px em rem在WEB前端开发中的区别

       这里面需要注意的一点就是,ren是根据根元素的字体大小来确定的:

        我们可能经常设置html{font-size:20px}或者font-size:16px,这些其实都没有错,但是可能我们有更好的设置方法:

    html{font-size:62.5%;}      /* font-size 62.5% = 10px =1rem */
    body{font-size:100%;}       /* font-size 100% = 10px = 1rem */
    .rem-1{font-size:1.2rem;}
    .rem-2{font-size:1.4rem;}
    .rem-3{font-size:1.6rem;}

      通过设置html的font-size:62.5%,我们就可以很方便的计算出px所对应的rem值,简单粗暴。

      常用的调节rem的视口尺寸:

    html {
        font-size : 20px;
    }
    @media only screen and (min- 401px){
        html {
            font-size: 25px !important;
        }
    }
    @media only screen and (min- 428px){
        html {
            font-size: 26.75px !important;
        }
    }
    @media only screen and (min- 481px){
        html {
            font-size: 30px !important; 
        }
    }
    @media only screen and (min- 569px){
        html {
            font-size: 35px !important; 
        }
    }
    @media only screen and (min- 641px){
        html {
            font-size: 40px !important; 
        }
    }

      最后分享一段淘宝手机屏幕尺寸判断改变字体大小的js(淘宝首页好像现在没有用rem了还是采用定宽px):

    !function(x) {
      //x 为window 
        function w() {
        //document.documentElement.getBoundingClientRect().width;
            var a = r.getBoundingClientRect().width;
         //先计算 a / v>540然后 && (a =540*v)
            a / v > 540 && (a = 540 * v), x.rem = a / 16, r.style.fontSize = x.rem + "px"
        }
      //s = window.document ,r = document.documentElement,q = document.querySelector('meta[name = "viewport"]'),p = document.querySelector("meta[name = 'flexible']")
        var v, u, t, s = x.document, r = s.documentElement, q = s.querySelector('meta[name="viewport"]'), p = s.querySelector('meta[name="flexible"]');
        if (q) {
            console.warn("将根据已有的meta标签来设置缩放比例");
            var o = q.getAttribute("content").match(/initial-scale=(["']?)([d.]+)1?/);
            o && (u = parseFloat(o[2]), v = parseInt(1 / u))
        } else {
            if (p) {
                var o = p.getAttribute("content").match(/initial-dpr=(["']?)([d.]+)1?/);
          //v是meta[name = "viewport"] dpi值大小
    
                o && (v = parseFloat(o[2]), u = parseFloat((1 / v).toFixed(2)))
            }
        }
        if (!v && !u) {
            var n = (x.navigator.appVersion.match(/android/gi), x.navigator.appVersion.match(/iphone/gi)), v = x.devicePixelRatio;
            v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, u = 1 / v
        }
        if (r.setAttribute("data-dpr", v), !q) {
            if (q = s.createElement("meta"), q.setAttribute("name", "viewport"), q.setAttribute("content", "initial-scale=" + u + ", maximum-scale=" + u + ", minimum-scale=" + u + ", user-scalable=no"), r.firstElementChild) {
                r.firstElementChild.appendChild(q)
            } else {
                var m = s.createElement("div");
                m.appendChild(q), s.write(m.innerHTML)
            }
        }
        x.dpr = v, x.addEventListener("resize", function() {
            clearTimeout(t), t = setTimeout(w, 300)
        }, !1), x.addEventListener("pageshow", function(b) {
            b.persisted && (clearTimeout(t), t = setTimeout(w, 300))
        }, !1), "complete" === s.readyState ? s.body.style.fontSize = 12 * v + "px" : s.addEventListener("DOMContentLoaded", function() {
            s.body.style.fontSize = 12 * v + "px"
        }, !1), w()
    }(window);
    (function () {
        var b = document.documentElement,
            a = function () {
                var a = b.getBoundingClientRect().width;
                //b.style.fontSize = 20 * (640 <= a ? 640 : a)/320 + "px"    这里设置的为根元素节点大小为20px,必须与样式里面的根节点样式大小一致,貌似不能通过document.documentElement.style.fontSize获取根节点元素字体大小只能手写,根元素大小*视口比例
                b.style.fontSize = .0625 * (640 <= a ? 640 : a) + "px"
            }, c = null;
        window.addEventListener("resize", function () {
            clearTimeout(c);
            c = setTimeout(a, 300)
        });
        a()
    })();

      根元素大小设置为多少,子元素的rem单位跟着一起变化扩大。我们这样设置:

                html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
                body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
                h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

      达到的目的只是方便我们去计算,等同于现在html 的fontsize:10px;  但是元素h1大小为20px 那么我们就可以把h1设置为2rem

      最后我还想谈一下,关于h5布局活动页面的问题:

      先来两张图做对比吧:

        

            chrome控制台                                                                 iphone4s

    看到这两张图,可能我们不禁要问,问什么320*480下正常,到了微信上面为什么不正常了,主要是因为微信底部有个顶部条导致的高度为65px(320下),为了解决这个问题,我们可能就要通过视口@media query去媒介调整,但每次未免也太麻烦了。

    为了解决这个问题,我们分析一下,通常设计师给我的设计稿可能有两种大小一种640*960  ,640*1136,如果说设计师在设计稿下大部分都填充了,那肯定会出现拥挤。其实我们应该这样做将布局分层三部分,顶部,中部,底部,让三者内容挨近保证能在带有微信底部条的960px下面不溢出,那么这样,我们就会少出现这些情况了。

      但是我们即使基于如上我说的设计稿要求去做也会遇到问题,那就是我们做出来的在320*480下是展现正常的,但是在微信下顶部bar+电量高度为64px,则实际变成了320*416的尺寸,所以通常来说要进行缩放,我们可以单独基于iphone4s来做一个处理:

    /* 兼容iphone4/4s */
    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
        .page1inner{padding-top: 5rem;}
        .page2inner{padding-top: 4%;}
        .img-zhong{margin-bottom: 0}
        .page3inner{padding-top: 10%;}
        .img-jj{margin-bottom: 5%}
        .img-shu{ 66%; margin-bottom: 6%}
        .page5inner{padding-top: 0;}
        .page6inner{ padding-top: 1rem;}
        .img-hua{ 35%; margin-bottom: 0}
        .page8inner{padding-top: .5rem}
        .page8-title{ margin-bottom: 1rem;}
        .page7-text{top: 10%}
    }

     用zoom加强,对元素进行缩放

    <script type="text/javascript">
    
        
            !function(){
                var cw=document.documentElement.clientWidth||document.body.clientWidth,zoom=cw/320;
                var ch= document.documentElement.clientHeight || document.body.clientHeight;
    
                zoom = Math.min(cw/320,ch/500);
    
                document.write('
                    <style id="htmlzoom">
                        html{font-size:'+(zoom*20)+'px;}
                        .svn_wrp{zoom:'+(zoom/2)+';}
                    </style>
                    ');
            }();
    
    </script>

     另外两种通过缩放解决多屏下,元素尺寸缩放问题:

     通过zoom解决的缩放问题:

        <script>
            (function () {
                var b = document.documentElement,
                    a = function () {
                        var a = b.getBoundingClientRect().width;
                        //b.style.fontSize = 20 * (640 <= a ? 640 : a)/320 + "px"    这里设置的为根元素节点大小为20px,必须与样式里面的根节点样式大小一致,貌似不能通过document.documentElement.style.fontSize获取根节点元素字体大小只能手写,根元素大小*视口比例
                     //   b.style.fontSize = .0625 * (640 <= a ? 640 : a) + "px"
                        b.style.cssText="-webkit-transform: translate3d(0px, 0px, 0px);zoom:"+(640 <= a ? 640 : a)/320;
                    }, c = null;
                window.addEventListener("resize", function () {
                    clearTimeout(c);
                    c = setTimeout(a, 300)
                });
                a()
            })();
        </script>

      基于transform中scale进行缩放

        <script>
            (function () {
                var b = document.documentElement,
                    a = function () {
                        var a = b.getBoundingClientRect().width;
                        //b.style.fontSize = 20 * (640 <= a ? 640 : a)/320 + "px"    这里设置的为根元素节点大小为20px,必须与样式里面的根节点样式大小一致,貌似不能通过document.documentElement.style.fontSize获取根节点元素字体大小只能手写,根元素大小*视口比例
                     //   b.style.fontSize = .0625 * (640 <= a ? 640 : a) + "px"
                        var p = (640 <= a ? 640 : a)/320;
                        b.style.webkitTransform = "scale(" + p + ")";
                    }, c = null;
                window.addEventListener("resize", function () {
                    clearTimeout(c);
                    c = setTimeout(a, 300)
                });
                a()
            })();
        </script>

      这里这两种缩放一定要注意一个问题,就是html,body,容器都是100%,height:100%

          //判断浏览器支持那个,然后加前缀
          prefix=function(){
             var style=document.body.style,vendor=["t","webkitT","mozT","oT","msT"],i=vendor.length;
                 while(i--)
                 {
                   if(typeof style[vendor[i]+"ransition"]!="undefined")
                     return vendor[i];
                 }
                 return vendor[0];
          }();

      友盟:http://www.umindex.com/devices/android_os

  • 相关阅读:
    idea 新建maven项目时,避免每次都需要指定自己的maven目录
    springboot2.X版本得@Transactional注解事务不回滚不起作用
    SpringBoot事务注解@Transactional
    #{}, ${}取值区别
    Mybaits多个参数的传递
    Mybaits基本的CURD操作
    mappers:将sql映射注册到全局配置中
    Mybaits配置多个数据库操作sql环境
    为java类起别名
    Mybaits成长之路
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/4322851.html
Copyright © 2011-2022 走看看