vue 移动端布局自适应

vue 移动端布局字体自适应

  1. 安装插件
javascript 复制代码
//根节点会根据页面视口变化而变化font-size大小
// 版本推荐 1.0.2
npm install lib-flexible-computer -S 
//自动将px转换为rem
//版本推荐 0.1.9
npm i px2rem-loader -D
//将代码中px自动转化成对应的rem的一个插件
npm install postcss-px2rem-exclude -D
  1. 在main.js引入
javascript 复制代码
//自适应不同分辨率
import 'lib-flexible-computer'
  1. 在vue.config.js中配置
javascript 复制代码
module.exports = {
  devServer: {},
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-pxtorem')({
              rootValue: 120, // 换算的基数 屏幕宽度/10
              propList: ['*'],// 需要转换的属性,*表示所有属性都需要转换
            })
          ]
        }

      }
    }
  }
};
  1. 配置完之后如果报错 node.getIterator is not a function

    使用 postcss-px2rem-exclude 会出现该错误

  2. 解决方法

javascript 复制代码
 // 卸载
 npm uninstall postcss-px2rem-exclude
 //重新安装
 npm install postcss-pxtorem@6.0.0
  1. 搞定!亲测有效!
相关推荐
ziyue757527 分钟前
vue修改element-ui的默认的class
前端·vue.js·ui
树叶会结冰1 小时前
HTML语义化:当网页会说话
前端·html
冰万森1 小时前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架
牧羊人_myr1 小时前
Ajax 技术详解
前端
浩男孩1 小时前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学1 小时前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空2 小时前
重学React —— React事件机制 vs 浏览器事件机制
前端
程序定小飞2 小时前
基于springboot的在线商城系统设计与开发
java·数据库·vue.js·spring boot·后端
一小池勺2 小时前
CommonJS
前端·面试