前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue 配置移动单位转换插件 postcss-px-to-viewport

vue 配置移动单位转换插件 postcss-px-to-viewport

作者头像
copy_left
发布2019-08-21 16:46:02
3.7K0
发布2019-08-21 16:46:02
举报
文章被收录于专栏:方球

postcss-px-to-viewport 当前版本 1.1.1 github地址

vue.config.js 配置
代码语言:javascript
复制
const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');

module.exports = {
  outputDir: 'dist/demo',
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtoviewport({
          
            // 配置视窗口尺寸
            viewportWidth: 750,
        
          })
        ]
      }
    }
  }
};
配置项
代码语言:javascript
复制
{
    // 需要转换的单位,默认为"px"
    unitToConvert: 'px',
    
    // 设计稿的视口宽度, 将根据视口做比例换算
    viewportWidth: 750,
    
    // 转化精度,转换后保留位数
    unitPrecision: 2,
    
    // 能转化为vw的属性列表
    propList: [],
    
    // 希望使用的视口单位
    viewportUnit: 'vw',
    
    // 字体使用的视口单位
    fontViewportUnit: 'vw',
    
    // 需要忽略的CSS选择器
    selectorBlackList: [],
    
    // 最小的转换数值
    minPixelValue: 1,
    
    // 媒体查询里的单位是否需要转换单位
    mediaQuery: true,
    
    // 转换后是否添加备用单位
    replace: true,
    
    // 忽略文件目录
    exclude: ['node_modules'],
    
    // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
    landscape: false,
    
    // 横屏时使用的单位
    landscapeUnit: 'vh',
    
    // 横屏时使用的视口宽度
    landscapeWidth: 1334
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.08.21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vue.config.js 配置
  • 配置项
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档