淘宝适配方案px2rem在Vue+Sass和React+Less中的使用

Posted 2020-12-07 xiaozhu007

直接上代码。

Vue+Sass，在_function.scss中写入，然后对对应的页面需要import即可(或者全局引入)

$designWidth: 750;

@function remVal($px) {
  @if unitless($px) {
    @return $px * $designWidth / $designWidth / 20 + rem;
  } @else {
    @return $px;
  }
}
@function px2rem($values) {
  $list: ();
  @each $value in $values {
    @if (type-of($value) == "number") {
      $list: append($list, remVal($value));
    }
  }
  @return $list();
}

React+Less，同样在_function.less中写入，同样按需引入

// Width
@designWidth: 750;

.px2rem(@px, @width: @designWidth) {
  @var: unit(@px * @width / @width / 20);
  @rem: ~‘@{var}rem‘;
}

最后一步也是最重要的，更改html的font-size。记住在Vue的index.html中写入此段。如果你用的是React。如umi.js+less。则要在document.ejs中写入。按html格式写

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <script>
    // css rem
    (function (b, c) {
      if (/(iPhone|iPad|iPod|ios|android)/i.test(navigator.userAgent)) { // 移动端
        const d = b.documentElement
        const isIos = navigator.userAgent.match(/iphone|ipod|ipad/gi)
        const dpr = Math.min(c.devicePixelRatio, 3)
        const scale = 1 / dpr
        const resizeEvent = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘; 
        d.dataset.dpr = dpr; 
        const e = b.createElement(‘meta‘); 
        e.name = ‘viewport‘
        if (!navigator.userAgent.match(/Redmi|QQBrowser|android/gi)) {
          e.content = `initial-scale=${scale},maximum-scale=${scale},user-scalable=no`
        }
        d.firstElementChild.appendChild(e);
        const f = function () {
          let a = d.clientWidth;
          if (a / dpr > 640) {
            a = 640 * dpr
          }
          d.style.fontSize = `${20 * (a / 750)}px`
        };
        f();
        if (!b.addEventListener) return;
        c.addEventListener(resizeEvent, f, false)
      }
    }(document, window))
  </script>

 到此结束。举个??

Vue+Sass的index.scss

@import "~function";

.test {
  width: px2rem(666);
}

React+Less的index.less

@import ‘../../../less/_function.less‘;

.test {
  width: .px2rem(666px) [ @rem];  
}