vite+vue进行移动端适配

#声明

• 单纯记录学习计算机当中所遇到的问题
• 把解决问题的方法分享给大家
• 希望大佬不要喷我这个小白

#使用的插件

• amfe-flexible（由淘宝开发的移动端适配工具）
• postcss-pxtorem(px转rem的工具)

#插件下载

npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev

#在main.js中引入amfe-flexible

import 'lib-flexible/flexible.js'

#在vite.config.js引入postcss-pxtorem，并进行配置

import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig({
	plugins: [
		vue(),
	    css:{
		postcss:{
		  plugins:[
			postCssPxToRem({
			  rootValue:37.5,//设计稿375px
			  propList:['*'],
			})
		  ]
		}
	  }
})

#效果图(以375px为例)

<template>
   <div id="container"></div>
</template>

<style lang="less" scoped>
 #container{
  width: 375px;
  height: 100px;
  background-color: orange;
 }
</style>