移动端网页布局适配rem方案小结

前言

根据 W3C 规范中对 1rem 的定义：

1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem 单位以该属性的初始值作参照。

这就意味着 1rem 等于 html 元素的字体大小（大部分浏览器根元素的字体大小为16px）

兼容性

ios：6.1系统以上都支持

android：2.1系统以上都支持

大部分主流浏览器都支持，可以安心的往下看了。

---

rem：（font size of the root element）

意思就是根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的跟元素（html）来设置字体大小的，举一个简单的例子，

现在大部分浏览器IE9+，Firefox、Chrome、Safari、Opera ，如果我们不修改相关的字体配置，都是默认显示font-size是16px，即

html {
    font-size:16px;
}

那么如果我们想给一个P标签设置12px的字体大小，那么用rem来写就是

p {
    font-size: 0.75rem; //12÷16=0.75（rem）
}

使用rem这个字体单位进行适配，就是利用它作为一个全局字体固定参照单位的特性。如果改变html元素的字体大小，rem的值也就跟着改变，对应的其他使用rem的布局尺寸，也会跟着改变，从而达到适配的目的，保证比例一致。 所以rem不仅可以适用于字体，同样可以用于width height margin这些样式的单位。

rem适配具体实现方案：

设计稿尺寸宽度为750px，如果设计稿是640px，下边js会自动计算rem的值（比如rem:75px -> rem: 64px），具体的尺寸rem不用调整（例如 padding: 1.5rem，不用调整，这是一个比例大小），对应的元素大小px值会根据新的rem（比如rem: 64px, padding等于 1.5 * 64）改变，从而按照比例适配。

index.html

helper.scss

$remBase: 75;
$primaryColor: #ffd633;

@function px2rem($px) {
  @return ($px / $remBase) * 1rem;
}

%textOverflow {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

// @include borderLineTop('top', color)
@mixin borderLine($mode: 'top', $color: #e5e5e5) {
  position: relative;
  @if $mode == 'top' {
    &::before {
      // 实现1物理像素的下边框线
      content: '';
      position: absolute;
      z-index: 1;
      pointer-events: none;
      background-color: $color;
      height: 1px;
      left: 0;
      right: 0;
      top: 0;
      @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform: scaleY(0.5);
        -webkit-transform-origin: 50% 0%;
      }
    }
  }
  @if $mode == 'bottom' {
    &::after {
      // 实现1物理像素的下边框线
      content: '';
      position: absolute;
      z-index: 1;
      pointer-events: none;
      background-color: $color;
      height: 1px;
      left: 0;
      right: 0;
      bottom: 0;
      @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform: scaleY(0.5);
        -webkit-transform-origin: 50% 0%;
      }
    }
  }
}

@mixin borderRadius($radius) {
  border-top-left-radius: px2rem($radius);
  border-top-right-radius: px2rem($radius);
  border-bottom-left-radius: px2rem($radius);
  border-bottom-right-radius: px2rem($radius);
}

// @include banner(100)
@mixin banner($height) {
  position: relative;
  padding-top: percentage($height/750); // 使用padding-top
  height: 0;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
  }
}

$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 100);

$sides: (top, bottom, left, right);
@each $space in $spaceamounts {
  @each $side in $sides {
    .m-#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{px2rem($space)} !important;
    }
    .p-#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{px2rem($space)} !important;
    }
  }
}

.flex-center {
  display: flex;
  align-items: center;
}

@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
      font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
      font-size: $font-size * 3;
  }
}

App.vue, 使用px2rem进行转换

扫码_搜索联合传播样式-标准色版.png