vue3的pc端项目适应移动端
时间: 2023-11-16 16:57:22 浏览: 187
基于vue项目下PC端和移动端实现的自适应.zip
为了让Vue3的PC端项目适应移动端,可以使用以下方法:
1. 在项目中引入lib-flexible库,可以在main.js中使用import 'amfe-flexible';语句进行引入。
2. 在vue.config.js中进行配置,使用postcss-pxtorem插件将px单位转换为rem单位,以适应不同屏幕尺寸。具体配置如下:
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5, // 设计稿宽度的1/10,如果设计稿宽度为750px,则rootValue为75
propList: ['*']
})
]
}
}
}
}
3. 可以使用适自创适配方案,根据浏览器可视区域自适应元素。具体使用方法是将资源下载下来,放入单独js文件中,独立写成一个全局方法,在Vue项目中可以在main.js中引入。
阅读全文