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

  • 相关阅读:
    topcoder srm 445 div1
    topcoder srm 440 div1
    topcoder srm 435 div1
    topcoder srm 430 div1
    topcoder srm 400 div1
    topcoder srm 380 div1
    topcoder srm 370 div1
    topcoder srm 425 div1
    WKWebView强大的新特性
    Runtime那些事
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/4322851.html
Copyright © 2011-2022 走看看