这篇文章主要介绍“Vue自适应布局postCSS-px2rem实例分析”,在日常操作中,相信很多人在vue自适应布局postcss-px2rem实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue自适
这篇文章主要介绍“Vue自适应布局postCSS-px2rem实例分析”,在日常操作中,相信很多人在vue自适应布局postcss-px2rem实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue自适应布局postcss-px2rem实例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
首先,我们来了解一下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下载不了
未免兼容麻烦,我这里指定了版本
import 'amfe-flexible'
在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'], //黑名单 } }}
到此,关于“vue自适应布局postcss-px2rem实例分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!
--结束END--
本文标题: vue自适应布局postcss-px2rem实例分析
本文链接: https://www.lsjlt.com/news/329413.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0