zoukankan      html  css  js  c++  java
  • css3 rem手机自适应框架

    css3 rem手机自适应框架

    rem是按照html的字体大小来 所以 不同宽度浏览器 htmlfont-size不一样 就可以做到自适应了 此方法比百分比方便
    <pre>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <div style="10rem; height:10.2rem; background: #000;"></div>
    <div style="10.6rem; height:10.3rem; background: #F00;"></div>
    </body>

    <script>
    (function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
    /* var clientWidth = docEl.clientWidth;*/
    var clientWidth = parseInt($('body').width());
    if (!clientWidth) return;
    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
    };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    </script>
    </html>
    </pre>

    ps:这个rem使用需要注意 这个js函数不是立马执行的 所以刚开始加载的时候最好加个进度条 或者用百分比 不然就会出现 js没执行完的rem效果 然后又出现js执行完加了rem的效果

  • 相关阅读:
    连续型随机变量
    离散型随机变量
    vue1.0生命周期
    vue2.0生命周期函数
    vue2.0 vue.set()
    vue2.0 vue.extend()的拓展
    vue2.0 自定义指令详解
    vue2.0 v-model指令
    vue2.0排序应该注意的问题
    vue2.0版本指令v-if与v-show的区别
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11876744.html
Copyright © 2011-2022 走看看