分享两个常用的rem布局方式

关于rem

这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。

比如我们设置body，html的字体大小为10px；那么1rem就是10px,

这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。

1.手机淘宝一直用的方法：思路是通过js动态的获取设备的DPR（设备像素比），根据dpr来改变标签

<Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;"/>

中的属性值；
代码如下

var dpr,rem,scale;
var docEl = document.documentElement;
var fontEl = document.createElement(‘style‘);
var MetaEl = document.querySelector(‘Meta[name="viewport"]‘);

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
MetaEl.setAttribute(‘content‘,‘width=‘ + dpr * docEl.clientWidth + ‘,initial-scale=‘ + scale + ‘,maximum-scale=‘ + scale + ‘,minimum-scale=‘ + scale + ‘,user-scalable=no‘);

// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute(‘data-dpr‘,dpr);

// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = ‘html{font-size:‘ + rem + ‘px!important;}‘;


window.dpr = dpr;
window.rem = rem;

此时在dpr=2时1rem=75px;

所以如果我们要设置div的宽度为750px;(注：750px,为设计稿中div的宽度)就要写为：width：750/75*1rem;

最后因为dpr为2，页面scale了0.5，所以在手机屏幕上显示的真实宽高应该是375px，就刚刚好。

如果设置的值不是好算的数字，比如123px,那就很蛋疼了

为了减少计算，在less中可以定义以下函数

.change_val(@name,@px){
    @{name}: @px / 75 * 1rem;
}

这样在less中就可以写为

.container{ 
　　.change_val (width,123); //123是设计稿原值 
　　.unchanged_val(font-size,100)
}

另：在设计中我们一般希望font-size一直固定不变对此：

.unchanged_val(@name,@px){
    @{name}: round(@px / 2) * 1px;
  [data-dpr="2"] & {
      @{name}: @px * 1px;
  }
  // for mx3
  [data-dpr="2.5"] & {
      @{name}: round(@px * 2.5 / 2) * 1px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
      @{name}: round(@px * 2.75 / 2) * 1px;
  }
  [data-dpr="3"] & {
      @{name}: round(@px /*3 / 2) * 1px
  }
  [data-dpr="3.5"] & {
      @{name}: round(@px * 3.5 / 2) * 1px;
  }
  // for 三星note4
  [data-dpr="4"] & {
      @{name}: @px * 2px;
  }
}

2.我们可以以iphone6（375*667）设计稿为原型：

设置css

html {
  font-size: calc(100vw/3.75);
}

这个意思就是设置 html的font-size为100px;

因为这样写比较方便，比如在写一个div宽度为75px时，直接定义width：0.75rem;就可以了

为了避免calc()的兼容性问题，可以加上如下js；

  document.documentElement.style.fontSize = window.innerWidth/3.75 + ‘px‘;

分享两个常用的rem布局方式

相关推荐