Socket
Socket
Sign inDemoInstall

postcss-plugin-pxtoviewport

Package Overview
Dependencies
10
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-plugin-pxtoviewport

px to vw and rem


Version published
Maintainers
1
Weekly downloads
5
increased by150%

Weekly downloads

Readme

Source

postcss-plugin-pxtoviewport

用法

配合postcss可以使px转为vw和rem

输入/输出

可以通过配置参数,实现px同时转为vw和rem

// 输入
h1 {
    margin: 0 0 20px;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: 1px;
}

// 输出
h1 {
    margin: 0 0 20px;
    margin: 0 0 1.25rem;
    margin: 0 0 5.33333vw;
    font-size: 32px;
    font-size: 2rem;
    font-size: 8.53333vw;
    line-height: 1.2;
    letter-spacing: 1px;
}

参数

Type: Object | Null
Default:

{
    viewportWidth: 750,
    viewportHeight: 1334,
    unitPrecision: 5,
    viewportUnit: 'vw',
    selectorBlackList: [],
    propList: [],
    minPixelValue: 1,
    mediaQuery: false,
    rootValue: 16,
    toRem: false,
    toViewport: true,
    isSavePx: false
}
  • viewportWidth (Number) 设计稿宽度。
  • viewportUnit (String) 转换单位。
  • rootValue (Number) 根节点字体大小。
  • toRem (Boolean) px是否可以转成rem。
  • toViewport (Boolean) px是否可以转为vw 或 vh。
  • isSavePx (Boolean) px是否保留。
  • unitPrecision (Number) 转换之后的精度。
  • propList (Array) 如果有些属性不想转为vw可以配置这个参数。
  • selectorBlackList (Array) 忽略转换的模块。
  • mediaQuery (Boolean) 媒体查询是否转换。
  • minPixelValue (Number) 设置最小像素.

使用 gulp-postcss and postcss-plugin-pxtoviewport

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var pxtovw = require('postcss-plugin-pxtoviewport');

gulp.task('css', function () {
    var processors = [
        autoprefixer({
            browsers: 'last 1 version'
        }),
        pxtovw({
            viewportWidth: 375,
            toRem: true
        })
    ];

    return gulp.src(['build/css/**/*.css'])
        .pipe(postcss(processors))
        .pipe(gulp.dest('build/css'));
});

使用 webpack

var webpack = require('webpack');
var px2viewport = require('postcss-plugin-pxtoviewport');

module.exports = {
    entry: [],
    output: [],
    module: {
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                {
                    loader: require.resolve('postcss-loader'),
                    options: {
                        ident: 'postcss',
                        plugins: () => [
                            px2viewport({
                                viewportWidth: 375,
                                toRem: true
                            })
                        ],
                    }
                }
            ]
        }
    }
}

Keywords

FAQs

Last updated on 27 Nov 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc