vue3+vite+amfe-flexible+postcss-pxtorem 实现全分辨率自适应
使用背景
在项目开发过程中，需要自适应多个分辨率，但是我目前按照设计稿开发出1920*1080的界面，为了快速实现自适应多个分辨率的目的，引用本组件
1.使用插件
npm install amfe-flexible --save
npm install postcss-pxtorem autoprefixer --save-dev2.使用
2.1 编写自定义脚本，适配全分辨率
文件名称： flexible.js
文件路径： src/utils/flexible.js
// 增强版适配方案（支持PC+移动）
(function (window, document) {const docEl = document.documentElementconst dpr = window.devicePixelRatio || 1// 设置body基准字体function setBodyFontSize() {if (document.body) {document.body.style.fontSize = 12 * dpr + 'px'}}// 动态计算rem基准值function setRemUnit() {const clientWidth = docEl.clientWidthlet baseSize = 16 // 默认基准值// 多分辨率适配策略if (clientWidth < 768) {baseSize = (clientWidth / 375) * 16 // 移动端适配} else if (clientWidth < 1920) {baseSize = (clientWidth / 1920) * 16 // PC端等比缩小} else {baseSize = (clientWidth / 1920) * 16 // 大屏等比放大}docEl.style.fontSize = baseSize + 'px'}// 初始化设置setBodyFontSize()setRemUnit()// 监听事件window.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', (e) => {if (e.persisted) {setRemUnit()}})
})(window, document)
2.2 编写配置文件
文件名称：postcss.config.js
文件路径：根目录
// 布局自适应配置
export default {plugins: {'postcss-pxtorem': {rootValue: 16, // 设计稿宽度 1920px 时，1rem = 192pxpropList: ['*'], // 所有属性都转换selectorBlackList: ['.ignore-rem'] // 忽略某些选择器},autoprefixer: {} // 自动添加浏览器前缀}
}
2.3 main.js 引入 flexible.js文件
必须比其他css样式先引入，要不然不生效
// 引入flexible 自适应
import '@/utils/flexible'
2.4 vite.config.js 配置 css解析
export default defineConfig(({ mode }) => {return {css: {postcss: './postcss.config'// 显式声明配置路},}
})
2.5 index.html引入
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
3. 修改文件以及对应目录
4. 实现的效果
实现的话再评论区扣1，SQ