两个简单的屏幕适配方案（适合PC和移动端）--- ts语法使用

• 在此只展示使用vite构建的vue3项目中的使用。

1. postcss-px-to-viewport

• 假设设计稿的尺寸是1920px，则100vw=1920px， 1vw= 19.2px，全部转为vw单位
  npm install postcss-px-to-viewport -D // 类型声明文件不装也不影响使用

• 在vite.config.js中配置

  import postCssViewPort from 'postcss-px-to-viewport'
  export default defineConfig({
   css: {
    postcss: {
       plugins: [
         postCssViewPort({
           viewportWidth: 1920,
           viewportUnit: 'vw',
           unitToConvert: 'px', // 需要转换的单位，默认为"px"
           unitPrecision: 5, // 单位转换后保留的精度
         }),
       ],
     },
   }
  

2. postcss-pxtorem

• 实际上是利用html根元素的font-size来确定1rem计算，比如设计稿为1920，通常/24， 设置1rem = 80px， 若是移动端375 或 750， 通常/10， 设置1rem = 37.5px 或者1rem=75
  npm install postcss-pxtorem -D

• 配置vite.config.js

  import postCssViewPort from 'postcss-px-to-viewport'
  export default defineConfig({
    css: {
     postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 80, // 通常为设计稿的尺寸/24， 移动端/ 10, 如果为1920的设计稿，则1rem = 1920 / 24 = 80px
            propList: ['*'],
     		 }),
        ],
      },
    }
  

• 配置flexible.js (设置html的font-size)

  function setRem() {
    // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
    const screenWidth = 1920
    const scale = screenWidth / 80
    const htmlWidth =
      document.documentElement.clientWidth || document.body.clientWidth
    // 得到html的Dom元素
    const htmlDom = document.getElementsByTagName('html')[0]
    // 设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / scale + 'px'
  }
  // 初始化
  setRem()
  // 改变窗口大小时重新设置 rem
  window.onresize = function () {
    setRem()
  }