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

Posted xiaozhu007

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了淘宝适配方案px2rem在Vue+Sass和React+Less中的使用相关的知识,希望对你有一定的参考价值。

直接上代码。

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];  
}

 

以上是关于淘宝适配方案px2rem在Vue+Sass和React+Less中的使用的主要内容,如果未能解决你的问题,请参考以下文章

vue使用flexible和px2rem实现移动端适配

vue3.0 vite px2rem pxtorem 移动端适配

在vue-cli3/4中使用px2rem做到移动端适配

移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果

vue项目中使用px2rem

vue-cli3.0 使用px2rem 或 postcss-plugin-px2rem