README-zh.md 7.19 KB

PostCSS Media Minmax

Build Status NPM Downloads NPM Version License

写简单优雅的 Media Queries!

Media Queries 中的 min-widthmax-width 等属性非常容易混淆,每次看到他们,我都想哭。现在新的规范中,可以使用更加直观的 >=<= 替代 media queries 中的 min-/max- 前缀。

V2.1.0 开始支持 >< 符号。

这是一个实现 CSS Media Queries Level 4 Polyfill 的插件,让你现在就可以使用这些特性,妈妈再也不用担心我记不住了,鹅妹子嘤!

English


Gif Demo

安装

$ npm install postcss-media-minmax

快速开始

示例 1:

var fs = require('fs')
var postcss = require('postcss')
var minmax = require('postcss-media-minmax')

var css = fs.readFileSync('input.css', 'utf8')

var output = postcss()
  .use(minmax())
  .process(css)
  .css

console.log('\n====>Output CSS:\n', output)  

或者只需:

var output = postcss(minmax())
  .process(css)
  .css

input.css:

@media screen and (width >= 500px) and (width <= 1200px) {
  .bar {
    display: block;
  }
}

你将得到:

@media screen and (min-width: 500px) and (max-width: 1200px) {
  .bar {
    display: block;
  }
}

CSS 语法

语法

<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value>
           | <mf-value> [ '<' | '>' ]? '='? <mf-name>
           | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value>
           | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

syntax

PostCSS Media Minmax 目前并没有实现 200px >= width 或者 200px <= width 这样的语法,因为这样的语法可读性并不不是太好。

取值(Values)

The special values:

  • 是一个正(非零非负)的 (整型)取值,其后跟随0个或多个空白,接着跟随一个斜线(“/”),再跟随0个或多个空白,最后跟随一个正。

    @media screen and (device-aspect-ratio: 16 /   9) {
      /* rules */
    }
    
    /* equivalent to */
    @media screen and (device-aspect-ratio: 16/9) {
      /* rules */
    }
    
  • 值是一个 0 或 1 的 (整型)取值。其他任何整数无效。注意, 在 CSS 中 -0 总是等价于 0 的,所以也作为一种有效的 取值。

    @media screen and (grid: -0) {
      /* rules */
    }
    
    /* equivalent to */
    @media screen and (grid: 0) {
      /* rules */
    }
    

如何使用

简写

示例 1中同一个 Media features name 同时存在 >=<= 时,可以简写为:

@media screen and (500px <= width <= 1200px) {
  .bar {
    display: block;
  }
}
/* 或者 */
@media screen and (1200px >= width >= 500px) {
  .bar {
    display: block;
  }
}

都会得到一样的输出结果:

@media screen and (min-width: 500px) and (max-width: 1200px) {
  .bar {
    display: block;
  }
}

注意:当 Media features name 在中间的时候,一定要保证两个 <=>= 的方向一致,否则不会转换。

例如在下面的示例中,width 大于等于 500px 同时又大于等于 1200px,这在语法和逻辑上都是错误的。

@media screen and (1200px <= width >= 500px) {
  .bar {
    display: block;
  }
}

支持的 Media features name

规范中目前以下属性支持 min-/max 前缀,PostCSS Media Minmax 全部支持自动转换。

  • width
  • height
  • device-width
  • device-height
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution

支持在 @custom-media 中使用 & Node Watch

var fs = require('fs')
var chokidar = require('chokidar')
var postcss = require('postcss')
var minmax = require('postcss-media-minmax')
var customMedia = require('postcss-custom-media')

var src = 'input.css'

console.info('Watching…\nModify the input.css and save.')


chokidar.watch(src, {
  ignored: /[\/\\]\./,
  persistent: true
}).on('all',
  function(event, path, stats) {
    var css = fs.readFileSync(src, 'utf8')
    var output = postcss()
      .use(customMedia())
      .use(minmax())
      .process(css)
      .css;
    fs.writeFileSync('output.css', output)
  })

input.css:

@custom-media --foo (width >= 20em) and (width <= 50em);
@custom-media --bar (height >= 300px) and (height <= 600px);

@media (--foo) and (--bar) {

}

output.css:

@media (min-width: 20em) and (max-width: 50em) and (min-height: 300px) and (max-height: 600px) {

}

Grunt

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    postcss: {
      options: {
        processors: [
          require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss, //Other plugin
          require('postcss-media-minmax')(),
        ]
      },
      dist: {
        src: ['src/*.css'],
        dest: 'build/grunt.css'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-postcss');

  grunt.registerTask('default', ['postcss']);
}

Gulp

var gulp = require('gulp');
var rename = require('gulp-rename');
var postcss = require('gulp-postcss');
var selector = require('postcss-media-minmax')
var autoprefixer = require('autoprefixer-core')

gulp.task('default', function () {
    var processors = [
        autoprefixer({ browsers: ['> 0%'] }), //Other plugin
        minmax()
    ];
    gulp.src('src/*.css')
        .pipe(postcss(processors))
        .pipe(rename('gulp.css'))
        .pipe(gulp.dest('build'))
});
gulp.watch('src/*.css', ['default']);

贡献

  • 安装相关的依赖模块。
  • 尊重编码风格(安装 EditorConfig)。
  • test目录添加测试用例。
  • 运行测试。
$ git clone https://github.com/postcss/postcss-media-minmaxs.git
$ git checkout -b patch
$ npm install
$ npm test

致谢

  • 感谢 PostCSS 作者 Andrey Sitnik,带给我们如此简单易用的 CSS 语法解析工具。
  • 感谢 Tab Atkins Jr. 辛苦编写了 Media Queries Level 4 规范。
  • 感谢 @紫云飞 对本插件的建议和帮助。

Changelog

License