码迷,mamicode.com
首页 > 移动开发 > 详细

vue-cli4中配置移动端自适应postcss-pxtorem

时间:2020-04-19 22:12:06      阅读:756      评论:0      收藏:0      [点我收藏+]

标签:roo   自适应   nod   product   list   browser   安装   blacklist   style   

vue-cli创建完项目之后安装amfe-flexible和postcss-pxtorem

 

npm i amfe-flexible -S
npm i postcss-pxtorem -D

amfe-flexible来根据屏幕动态改变根元素font-size,postcss-pxtorem把代码中px转为rem;在项目根目录建vue.config.js

vue.config.js内容:

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("autoprefixer")({
            // 配置使用 autoprefixer
            overrideBrowserslist: ["last 15 versions"] 
          }),
          require("postcss-pxtorem")({
            rootValue: 75, // 换算的基数
            // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI,也会被转化。目前我使用 selectorBlackList字段,来过滤
            //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
            selectorBlackList: ["ig"],
            propList: ["*"],
            exclude: /node_modules/
          })
        ]
      }
    }
  }
};

后在main.js里引入amfe-flexible

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./router‘
import store from ‘./store‘
import ‘amfe-flexible‘

Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount(‘#app‘)

 

 

注:如果你创建时候选择了prettier格式化代码而且编译器也装了插件,你的css里不想被转化的"PX"编译器会自动帮你转化为"px",此时只要在不想转化前一行加上

/* prettier-ignore */即可
 
示例如下:
技术图片

 

 转化后:

技术图片

 

 技术图片

 

vue-cli4中配置移动端自适应postcss-pxtorem

标签:roo   自适应   nod   product   list   browser   安装   blacklist   style   

原文地址:https://www.cnblogs.com/yifeng555/p/12734032.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!