zoukankan      html  css  js  c++  java
  • 移动端关于计算rem的flexible.js

    //以下这个就是flexible.js
    <script>
    var docEl=document.documentElement,
    //当设备的方向变化(设备横向持或众向持)此事件被触发,绑定此事件时,注意现在当浏览器不支持orientationchange事件的时候我们绑定了resize事件。总的来说就是监听当然窗口的变化,需要重新设置根字体的值
    resizeEvt='orientationchange' in window ? 'orientationchange':'resize',
    recalc=function(){
    //设置根字体的大小
    docEl.style.fontSize=20*(docEl.clientWidth/320)+'px';
    };
    //绑定浏览器缩放与加载时间
    window.addEventListener(resizeEvt,recalc,false);
    document.addEventListener('DOMContentLoaded',recalc,false);

    </script>


    //备注:100px约等于5rem(就这样大致计算吧100px=5rem)

    下面给个例子试一试吧;

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
    <title>历史预约</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/flexible.js"></script>
    <style>
    .width{100%;height:5rem;background: red;color:#ffffff;font-size:0.7rem}/*5rem相当于是100px;0.7rem相当于你14px*/
    </style>
    </head>
    <body>
    <div class="width">这是一个可以随便缩放的div</div>
    </body>
    </html>





  • 相关阅读:
    Linux命令:ls
    Log4j:log4j.properties 配置解析
    PostgreSQL: WITH Queries (Common Table Expressions)
    Linux使用SecureCRT上传下载
    PostgreSQL 自动输入密码
    Linux命令:rmdir
    Linux命令:mkdir
    Linux命令:pwd
    Linux命令:cd
    正则表达式 
  • 原文地址:https://www.cnblogs.com/ouyangyulin/p/8334886.html
Copyright © 2011-2022 走看看