Static7

通过js动态设置根元素的rem方案

2019-02-14 15:30:53 前端开发

rem目前是响应式开发移动端一个很重要也是常用的一个元素,但是在网上看的各种文章都会超级懵逼。所以我在下面给出两个方案,也列举出使用方法,让大家一目了然。前提是设计稿以750为准。其中测试的设计稿中标注此div的width:750px;height:200px;

方案一:

<script type="text/javascript">
  window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {    function c() {      var d = document.documentElement;      var cw = d.clientWidth || 750;
      d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
    }
    c();    return c;
  })(), false);  </script>
<style type="text/css">
  html{font-size:10px}
  *{margin:0;}  </style>

设计稿中标注此div的width:750px;height:200px;
换算为rem,即为width:18.75rem,height:5rem;
此时 1rem = 40px;将设计稿标注的宽高除以40即可得到rem的值。

<div style="width:18.75rem;height:5rem;background:#f00;color:#fff;text-align:center;">
    此时在iPhone6上测试,width:375px,也即width:100%。</div>

方案二:

<script type="text/javascript">
  !(function(doc, win) {    var docEle = doc.documentElement, //获取html元素
      event = "onorientationchange" in window ? "orientationchange" : "resize", //判断是屏幕旋转还是resize;
      fn = function() {        var width = docEle.clientWidth;
        width && (docEle.style.fontSize = 10 * (width / 375) + "px"); //设置html的fontSize,随着event的改变而改变。
      };

    win.addEventListener(event, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);

  }(document, window));  </script>
  <style type="text/css">
  html {    font-size: 10px;
  }
  *{    margin: 0;
  }  </style>

设计稿中标注此div的width:750px;height:200px;
换算为rem,即为width:37.5rem,height:10rem;
此时 1rem = 20px;将设计稿标注的宽高除以20即可得到rem的值。

<div style="width:37.5rem;height:10rem;background:#f00;color:#fff;text-align:center;">
    test  </div>

以上两种方案均为通过js动态设置html的根元素的font-size的值来达到响应式的效果。

最后一个为手淘的方案:

<meta content="yes" name="apple-mobile-web-app-capable">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
  <div style="width:10rem;height:2rem;background:#f00;color:#fff;text-align:center;">
    test  </div>

瑾瑜.2016.12.08 14:02



原文链接: https://segmentfault.com/a/1190000007736692
文章评论