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 20 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue实现简易音乐播放器
Aug 14 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
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
Open and Print a Word Document
2007/06/15 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
VueJS全面解析
2016/11/10 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
关于幼儿的自我评价
2013/12/18 职场文书
重阳节登山活动方案
2014/02/03 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
工作推荐信范文
2014/05/10 职场文书
时尚女魔头观后感
2015/06/04 职场文书
2022年显卡天梯图(6月更新)
2022/06/17 数码科技