移动端网页布局适配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进行转换

复制代码