移动端rem布局

移动端因为需要适配多种机型，所以布局以及字体需要动态变化，可以百分百布局但是高度不好掌握，在这里记录一下rem布局的实现

获取像素比

var PixelRatio = 1/window.devicePixelRatio

通过js动态去控制视口，达到不同屏幕下都是1：1

document.write('<meta name="viewport" content="width=device-width,
initial-scale='+PixelRatio+',
minimum-scale='+PixelRatio+',
maximum-scale='+PixelRatio+'">')

动态设置html的字体大小 尺寸越小，则字体越小。

// 获取html节点
var html = document.getElementsByTagName('html')[0];
// 获取屏幕宽度
var pageWidth = html.getBoundingClientRect().width;
// 屏幕宽度 / 固定数值 = 基准值
html.style.fontSize = pageWidth / 16 + "px";

• 比如在iphone5下开发我们会看到font-size的大小为40px
• 页面宽度是640的 和屏幕分辨率是1：1
• 接下来我们使用less开发 这样不会频繁的去用计算器算出我们的rem大小

  koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript

• 地址 http://koala-app.com/index-zh.html
• 在当前项目中创建.less 之后运行koala选择文件就会自动生成一个css
• 在html我们直接引入css文件就行 他会自动编译到css当中

  less

• 在less当中我们要设置一个变量字体大小和单位是rem

  //变量 定义rem大小，并设置单位
  @rem:40rem;

• 然后计算我们的rem 如果高度是350 我们只需记住视口和屏幕分辨率的比是1：1

  width:350/@rem;
  height:350/@rem;

  完成的代码

  <script>
        //获取像素比
        var PixelRatio = 1/window.devicePixelRatio
        document.write('<meta name="viewport" content="width=device-width,
         initial-scale='+PixelRatio+',
         minimum-scale='+PixelRatio+',
         maximum-scale='+PixelRatio+'">')
        var html = document.getElementsByTagName('html')[0]
        var pageWidth = html.getBoundingClientRect().width;
        html.style.fontSize = pageWidth / 16 + "px";
  </script>

  另一种实现rem的方式

  (function (doc, win) {
      var docEl = doc.documentElement,
              resizeEvt = 'orientationchange' in window ?
              'orientationchange' : 'resize',
              recalc    = function () {
                  var clientWidth = docEl.clientWidth;
                  if (clientWidth>=640) {
                      clientWidth = 640;
                  };
                  if (!clientWidth) return;
                  docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
              };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);

• 视口设置等于1.0
• 这种在640屏幕下的font-size是50px;
• 假如元素高200px; 需要100px/50 因为设置图纸是实际像素的2倍
• 320宽的手机物理像素是640 所以需要/2

  ydui.flexible.js 是处理移动端 rem 自适应（可伸缩布局方案）的类库

• 网址 http://vue.ydui.org/docs/#/flexible
• ydui.flexible.js 是处理移动端 rem 自适应（可伸缩布局方案）的类库，无须第三方工具（如Sass/Less方法、Gulp、Sublime插件），轻松口算设计稿对应rem值；
• ydui.flexible.js 源码：

  /**
   * YDUI 可伸缩布局方案
   * rem计算方式：设计图尺寸px / 100 = 实际rem  【例: 100px = 1rem，32px = .32rem】
   */
  !function (window) {
  
      /* 设计图文档宽度 */
      var docWidth = 750;
  
      var doc = window.document,
          docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  
      var recalc = (function refreshRem () {
          var clientWidth = docEl.getBoundingClientRect().width;
  
          /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */
          docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';
  
          return refreshRem;
      })();
  
      /* 添加倍屏标识，安卓为1 */
      docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ?
       window.devicePixelRatio : 1);
      if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
          /* 添加IOS标识 */
          doc.documentElement.classList.add('ios');
          /* IOS8以上给html添加hairline样式，以便特殊处理 */
          if (parseInt(window.navigator.appVersion.match
          (/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
              doc.documentElement.classList.add('hairline');
      }
  
      if (!doc.addEventListener) return;
      window.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
  
  }(window);

赏

谢谢你请我吃糖果

支付宝

微信