淘宝适配方案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中的使用的主要内容,如果未能解决你的问题,请参考以下文章
vue3.0 vite px2rem pxtorem 移动端适配