zoukankan      html  css  js  c++  java
  • 手机端rem自适应布局实例

    首先要书写核心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%; 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{ 7.5rem;height:1rem;}//因为我是以750px为标准的,默认又是100px所以全屏宽度就是750/100=7.5rem;高度是:100/100=1rem;以此换算。

    假设你要设置24号的字体的话,则为:24/100=0.24rem;

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

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

  • 相关阅读:
    pku3734Blocks
    STLmultiset
    zoj 2744
    EXCEL vba 插入图片的大小裁剪尺寸移动和旋转的设置和指定
    C# WinForm下Excel导入导出
    日期格式校验
    vb获取目录下所有文件夹名称的方法
    批量 生成 word 多线程
    Java中验证日期时间格式
    递归绑定树形菜单
  • 原文地址:https://www.cnblogs.com/joya0411/p/5212657.html
Copyright © 2011-2022 走看看