vite2+ts+vue3项目创建(二)

  • 配置移动端rem,下载依赖 postcss-pxtorem
npm install postcss-pxtorem -dev
  • 在根目录新建postcss.config.js文件
module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 37.5,
      propList: ["*"],
      // 过滤掉.norem-开头的class,不进行rem转换
      selectorBlackList: [".norem"],
    },
  },
};
  • 在src中新建utils/rem.ts等比适配文件
// 基准大小,按照375的宽度进行缩放比例
const baseSize = 37.5 
// 注意此值要与 postcss.config.js 文件中的 rootValue保持一致
// 设置 rem 函数
function setRem () {
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}
  • 在main.ts文件中引入rem.ts
import 'utils/rem'

使用postcss-pxtorem,不想转换rem的个别属性可以使用Px来禁止转换rem,例如:

font-size:12Px;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容