zoukankan      html  css  js  c++  java
  • rem单位,10px等于0.1rem,移动端背景自适应

    <!doctype html>
    <html data-use-rem><!--需要加的-->
    <head>
    <meta charset="gb2312">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="applicable-device" content="mobile">
    <title>rem单位使用</title>
    <script src="https://style.org.hc360.com/js/build/source/core/jquery.min.js"></script>
    <script src="https://style.org.hc360.com/js/M-hc/jquery_self.js"></script>
    </head>
    
    <body>
    
    <style>
    .mbg1{ background:url(../images/t1.jpg) no-repeat center center; width:100vw; height:6.57rem; background-size:cover; overflow:hidden;}
    .mbg2{ background:url(../images/t2.jpg) no-repeat center center; width:100vw; height:6.29rem; background-size:cover; overflow:hidden;}
    </style>
    
    
    <div class="mbg1"></div>
    <div class="mbg2"></div>
    
    
    
    
    
    <!--需要加的-->
    <script type="text/javascript">
    
    (function (win){
      var doc = win.document;
      var html = doc.documentElement;
      var option = html.getAttribute('data-use-rem');
      if( option === null ) return;
      // defaut 750px;
      var baseWidth = option == 'default' || option == '' || parseInt(option) <= 0 ? 750 : parseInt(option);
      var grids = baseWidth/100,
      resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
      recalc = function() {
        var clientWidth = html.clientWidth || 375; // default to 375 if can't get device-width
        html.style.fontSize = clientWidth / grids + 'px';
      };
      // Abort if browser does not support addEventListener
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
      recalc();
    })(window);
    
    
    </script>
    
    </body>
    </html>
  • 相关阅读:
    多态
    没有抽象方法的抽象类有什么意义
    抽象类继承(雇员练习)
    怎样在win7中 安装Tomcat7.0
    继承训练
    Java的接口和抽象类
    jQuery插件的学习
    jQuery学习之路-A
    android之路-android事件处理-OnTouchListener
    丢弃的东西,还能否找回?
  • 原文地址:https://www.cnblogs.com/su1637/p/13253936.html
Copyright © 2011-2022 走看看