webapp新体验Rem实现移动端网页适配详解资源

时间  2019-11-11
标签 webapp 体验 rem 实现 移动 网页 适配 详解 资源 栏目 无线 繁體版
原文   原文链接

　　原本想写一篇，webapp使用Rem的问题，查了一下相关rem的介绍以后，发现不少平台已经解释的很清楚了，图文并茂，因而我便想将其解释资源整理一些，方便之后本身查阅。javascript

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

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

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

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

 　 这里面须要注意的一点就是，ren是根据根元素的字体大小来肯定的：android

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

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值，简单粗暴。web

　　经常使用的调节rem的视口尺寸：chrome

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 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{width: 66%; margin-bottom: 6%}
    .page5inner{padding-top: 0;}
    .page6inner{ padding-top: 1rem;}
    .img-hua{width: 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，容器都是width: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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程