手机端rem自适应布局实例

最新推荐文章于 2024-04-29 11:17:53 发布

weixin_30432179

最新推荐文章于 2024-04-29 11:17:53 发布

阅读量70

点赞数

原文链接：http://www.cnblogs.com/joya0411/p/5212657.html

版权

首先要书写核心js代码，控制住页面的初始大小：我是以750px（即iPhone6）的标准，设置font-size：100px；
<script>
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };

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

接下来再设置一下html和body：
html { height: 100%; width: 100%; font-family: 'Heiti SC', 'Microsoft YaHei'; font-size: 100px; outline: 0; -webkit-text-size-adjust:none;}
body { height: 100%; margin: 0; -webkit-user-select: none; position: relative;}

现在就可以开始布局了。
假设你现在需要一个宽度为全屏；高度为100px；的div。你可以这么写：
div{ width:7.5rem;height:1rem;}//因为我是以750px为标准的，默认又是100px所以全屏宽度就是750/100=7.5rem；高度是：100/100=1rem;以此换算。

假设你要设置24号的字体的话，则为：24/100=0.24rem；

其他屏幕的手机将会自动适配。

来源于：http://tieba.baidu.com/p/3870227753

转载于:https://www.cnblogs.com/joya0411/p/5212657.html