vue适配不同屏幕方案 - postcss-pxtorem，vw，rem，media

使用背景

在开发项目中，一般是开发pc端的，但是屏幕放在其他的屏幕的时候会遇见兼容问题，要保证在不同屏幕下的布局效果相同，兼容不同屏幕就显得很重要了

在移动端适配方案中，通常将设计稿宽度分为 10 等份，每份对应一个 rem 值。因此 rootValue 的值应该设置为设计稿宽度除以 10，以确保将设计稿尺寸映射到正确的 rem 值。

1. VW / VH

 css单位，分别把屏幕宽度和高度分成100份，用这个单位做元素的宽高，也可以在屏幕大小变化的时候实现适配，根据不同屏幕大小去自己调整元素大小，不会超出屏幕范围

但需要自己根据设计图去调整元素大小，只能看感觉去调整元素大小和比例，比较麻烦

2. 媒体查询 media

根据不同的屏幕大小范围，手动调整元素的样式来适配不同屏幕的兼容性

适合在pc端开发结束后，需要增加其他屏幕需求但没做适配时添加媒体查询，一个样式需要在范围内不断调整，比较麻烦

/*最大屏幕分辨率为1280px*/
@media screen and (max-width:1280px){
	.content{ 
		width:20%
	}
}
/*最小屏幕分辨率为1280px且最大为1440px*/
@media (min-width: 1280px) and (max-width:1440px){
	.content{ 
		width:40%
	}
}
/*最小屏幕分辨率为1440px且最大为1680px*/
@media (min-width: 1440px) and (max-width:1680px){
	.content{ 
		width:60%
	}
}
/*最小屏幕分辨率为1920px*/
@media screen and (min-width:1920px){
	.content{ 
		width:100%
	}
}

3.  Rem适配

根据 html 的 font-size 来控制项目全部以rem为单位的元素大小，默认1rem = 16px，也可手动在html中更改默认rem值，在项目控制中，一般由js控制屏幕大小变化时的值

// 监听窗口大小，实时改变html元素字体大小
window.onresize = ()=>{
    // 手机屏最小在320，再小就不是手机了，需要另做处理，此处就不写了
    // 100为设置的默认根元素字体大小，定100方便计算
    // 375位设计稿尺寸  
    const htmlFontSize = document.documentElement.clientWidth*100/375
    // 根据实时屏幕宽度来动态改变html的字体大小
    document.documentElement.style.fontSize = htmlFontSize + 'px'
}

// 使用时按照rem单位书写css尺寸

4. vue vite框架 插件postcss-pxtorem（推荐)

配置插件自动将px转化为rem单位，可直接像开发pc端页面一样，直接写设计稿的元素大小，会自动根据设备大小转化元素大小，不用再考虑适配问题

// 安装依赖

// postcss的插件，用于将 px 转换成 rem 
npm install postcss-pxtorem -D

// 根据设备宽度修改根元素html的大小，配置可伸缩布局方案，将1rem设为viewWidth/10
npm install amfe-flexible -D

 配置vite.config.ts

import postCssPxToRem from "postcss-pxtorem"
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 75, // 设计稿尺寸 1rem大小
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
        })
      ]
    }
  }
})

main.ts导入

import 'amfe-flexible'

这样效果的时候就表示已经配置成功，拉伸屏幕就能自动适配元素大小