vue移动端自适应布局

前端小白LL

已于 2024-02-06 18:53:41 修改

阅读量2.2k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端

于 2022-11-13 10:49:46 首次发布

本文链接：https://blog.csdn.net/weixin_49813550/article/details/127829333

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

vue移动端自适应布局

根据postcss-pxtorem来实现自动渲染px至rem，不用再进行手动计算

一、实现方式

postcss-pxtorem：将px转换为rem；
amfe-flexible：为html，body添加font-size，在窗口调整时重新设置font-size

二、安装与使用

安装

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

使用
1、在main.js中引入

import "amfe-flexible/index.js"; //适配

2、创建postcss.config.js配置文件

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
      ],
    },
    "postcss-pxtorem": {
      rootValue: 37.5,
      propList: ["*"],
      selectorBlackList: [/^\.el-/],//过滤掉element-ui组件；文件样式大写PX
    },
  },
};