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+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 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面向对象 字段的声明与使用
2012/06/14 PHP
PHP输出日历表代码实例
2015/03/27 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
django 创建过滤器的实例详解
2017/08/14 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
Django celery异步任务实现代码示例
2020/11/26 Python
书法大赛策划方案
2014/06/04 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
nginx结合openssl实现https的方法
2021/07/25 Servers
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技