分享一种移动端基于rem的适配方案

351 阅读1分钟

1、动态rem值计算(这里使用的less,以iphone6为标准设计稿为例)

@vw_fontsize: 14;
@vw_base: 375;

html {
  font-size: (@vw_fontsize / @vw_base) * 100vw;
}
// 横屏
@media screen and (orientation: landscape) {
  html {
    font-size: (@vw_fontsize / @vw_base) * 100vh;
  }
}

2、使用pxtorem对项目中的px转化成rem

  1. 在vite中使用,vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import pxtorem from 'postcss-pxtorem'

export default ({ mode }) => {
  return defineConfig({
    css: {
      postcss: {
        plugins: [
          pxtorem({
            rootValue: 14,  
            propList: ['*'],
            selectorBlackList: ['.norem']  
          })
        ]
      }
    }
  })
}

2.在webpack中使用,根目录增加 postscss.config.js文件

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 14,  
      propList: ['*'],
      selectorBlackList: ['.norem']  
    }
  }
}

3、所有的样式中的px单位直接从设计稿中复制黏贴即可,我司使用的蓝湖,所以直接在蓝湖中复制黏贴一把梭就是了