• 售前

  • 售后

热门帖子
入门百科

vue移动端自顺应适配题目详解

[复制链接]
散漫竹子 显示全部楼层 发表于 2021-10-26 13:52:27 |阅读模式 打印 上一主题 下一主题
1、vue ui创建项目


2、选择基本设置项


3、运行项目


4、新建rem.js文件
  1. // 基准大小
  2. const baseSize = 32
  3. // 设置 rem 函数
  4. function setRem () {
  5.   // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
  6.   const scale = document.documentElement.clientWidth / 750
  7.   // 设置页面根节点字体大小
  8.   document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
  9. }
  10. // 初始化
  11. setRem()
  12. // 改变窗口大小时重新设置rem
  13. window.onresize = function () {
  14.   setRem()
  15. }
复制代码

5、在main.js中引入
  1. import './utils/rem'
复制代码

6、安装postcss-pxtorem 自动转换px为rem
  1. npm install postcss-pxtorem -D
复制代码

7、新建 .postcssrc.js文件
  1. module.exports = {
  2.   "plugins": {
  3.     "postcss-import": {},
  4.     "postcss-url": {},
  5.     // to edit target browsers: use "browserslist" field in package.json
  6.     "autoprefixer": {},
  7.     "postcss-pxtorem": {
  8.       "rootValue": 32,
  9.       "propList": ["*"]
  10.     }
  11.   }
  12. }
复制代码

8、继续运行报错


9、新建vue.config.js文件(办理第八步报错 )
  1. module.exports = {
  2.   //双击index.html文件直接运行
  3.   publicPath: './',
  4.   // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  5.   outputDir: 'dist',
  6.   lintOnSave: true,
  7.   // 是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
  8.   runtimeCompiler: true,
  9.   // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾
  10.   productionSourceMap: false,
  11.   configureWebpack: config => {
  12.     if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置...
  13.       return {
  14.       }
  15.     } else {
  16.       return {
  17.       }
  18.     }
  19.   },
  20.   css: {
  21.     extract: true, // 开启 CSS source maps?
  22.     sourceMap: false, // css预设器配置项
  23.     modules: false,
  24.     loaderOptions: {
  25.       postcss: {
  26.         plugins: [
  27.           require('postcss-pxtorem')({
  28.             rootValue: 37.5, // 换算的基数
  29.             selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
  30.             propList: ['*']
  31.           })
  32.         ]
  33.       }
  34.     }
  35.   },
  36.   // webpack-dev-server 相关配置
  37.   devServer: { // 设置代理
  38.     hot: true, // 热加载
  39.     host: '0.0.0.0', // ip地址
  40.     port: 8082, // 端口
  41.     https: false, // false关闭https,true为开启
  42.     open: true, // 自动打开浏览器
  43.     overlay: {
  44.       warnings: false,
  45.       errors: false
  46.     }
  47.   }
  48. }
复制代码

10、自动适配完成


到此这篇关于vue移动端自适应适配题目详解的文章就介绍到这了,更多相关vue移动端自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章盼望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作