vue移动端自适应适配问题详解
最编程
2024-02-12 08:09:24
...
1、vue ui创建项目
2、选择基本配置项
3、运行项目
4、新建rem.js文件
// 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } // 初始化 setRem() // 改变窗口大小时重新设置rem window.onresize = function () { setRem() }
5、在main.js中引入
import './utils/rem'
6、安装postcss-pxtorem 自动转换px为rem
npm install postcss-pxtorem -D
7、新建 .postcssrc.js文件
module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 32, "propList": ["*"] } } }
8、继续运行报错
9、新建vue.config.js文件(解决第八步报错 )
module.exports = { //双击index.html文件直接运行 publicPath: './', // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录 outputDir: 'dist', lintOnSave: true, // 是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template runtimeCompiler: true, // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾 productionSourceMap: false, configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... return { } } else { return { } } }, css: { extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 modules: false, loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 37.5, // 换算的基数 selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项 propList: ['*'] }) ] } } }, // webpack-dev-server 相关配置 devServer: { // 设置代理 hot: true, // 热加载 host: '0.0.0.0', // ip地址 port: 8082, // 端口 https: false, // false关闭https,true为开启 open: true, // 自动打开浏览器 overlay: { warnings: false, errors: false } } }
10、自动适配完成
到此这篇关于vue移动端自适应适配问题详解的文章就介绍到这了,更多相关vue移动端自适应内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
推荐阅读
-
Vue 中实现自动适配移动端:利用 autoprefixer、amfe-flexible 和 postcss-pxtorem 转换 px 为 rem
-
在Vue中如何用rem实现移动端的屏幕自适应布局
-
vue-cli3.0使用rem适配移动端
-
vue.config配置 px2rem实现pc端大屏自适应(rem适配)
-
Vue ——使用lib-flexible和postcss-pxtorem 移动端实现rem适配
-
vue移动端自适应适配问题详解
-
vue+px2rem实现pc端大屏自适应的实例代码(rem适配)
-
移动端Vue项目屏幕自适应解决方案:详解rem的运用方法
-
搞定Vue移动端和PC端适配的实用方法(亲自试过)
-
Vue移动端布局优化:实现页面自适应