vue postcss-px2rem 自适应布局


Posted in Vue.js onMay 15, 2022

首先,我们来了解一下lib-flexible和amfe-flexible:
lib-flexible是淘宝项目组开发出来的一个开源插件,会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。而amfe-flexible是lib-flexible的升级版,所以现在我就只使用amfe-flexible了。
与其搭配的postcss-px2rem(pxtorem)作用为把px转变为rem
1.下载amfe-flexible: cnpm install postcss-px2rem -S
2.下载postcss-px2rem: cnpm install postcss-px2rem -S
小tip:使用yarn下载不了

未免兼容麻烦,我这里指定了版本

vue postcss-px2rem 自适应布局

3.在main.js里引入amfe-felxible

import 'amfe-flexible'

3.在vue.config.js文件里面配置postcss

我下载的vue-cli3,配置如下

module.exports = {
css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 37.5
          })
        ]
      }
    }
  }
}

vue-cli2配置则为

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": { // 此处为添加部分
      rootValue: 100, // 换算基数,默认100,把根标签的font-size规定为1rem为50px,在设计稿上量出多少px直接在代码中写多少px
      unitPrecision: 5,  //保留rem小数点多少位
      propList: ['*', '!border', '!font-size'], //  存储将被转换的属性列表,'!font-size' 即不对字体进行rem转换
      selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器,例如fs-xl类名,里面有关px的样式将不被转换,支持正则写法。
      replace: true,
      mediaQuery: false,//(布尔值)媒体查询( @media screen 之类的)中不生效
      minPixelValue: 12,///设置要替换的最小像素值,px小于12的不会被转换
      //propWhiteList: [],  //默认值是一个空数组,这意味着禁用白名单并启用所有属性
      propBlackList: ['font-size'], //黑名单
    }
  }
}

参考:

https://blog.csdn.net/weixin_44388523/article/details/90445885

https://blog.csdn.net/qq_42031498/article/details/106054343

https://github.com/cuth/postcss-pxtorem

https://github.com/mrsunx/lib-flexible#readme

到此这篇关于vue自适应布局(postcss-px2rem)的文章就介绍到这了,更多相关vue自适应布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Vue.js 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
vue使用watch监听属性变化
Apr 30 #Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
vue项目如何打包之项目打包优化(让打包的js文件变小)
关于vue-router-link选择样式设置
Apr 30 #Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 #Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 #Vue.js
You might like
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python中的tuple元组详细介绍
2015/02/02 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
基于python生成器封装的协程类
2019/03/20 Python
python地震数据可视化详解
2019/06/18 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
解决python flask中config配置管理的问题
2019/07/26 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
如何使用Python调整图像大小
2020/09/26 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Python 制作自动化翻译工具
2021/04/25 Python