{"id":14968118,"url":"https://github.com/postcss/postcss-media-minmax","last_synced_at":"2025-05-15T09:04:43.917Z","repository":{"id":24464258,"uuid":"27867562","full_name":"postcss/postcss-media-minmax","owner":"postcss","description":"Writing simple and graceful Media Queries!","archived":false,"fork":false,"pushed_at":"2023-10-04T08:26:43.000Z","size":103,"stargazers_count":299,"open_issues_count":16,"forks_count":18,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-11T22:25:02.686Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/postcss.png","metadata":{"files":{"readme":"README-zh.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2014-12-11T11:12:09.000Z","updated_at":"2025-01-26T20:13:35.000Z","dependencies_parsed_at":"2024-04-12T08:59:17.503Z","dependency_job_id":"7c2737b7-301d-4977-a2ce-4f9a068ce195","html_url":"https://github.com/postcss/postcss-media-minmax","commit_stats":{"total_commits":40,"total_committers":11,"mean_commits":"3.6363636363636362","dds":0.55,"last_synced_commit":"b585b23ffc53cd4992f41925545f9cb25ea89383"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-media-minmax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-media-minmax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-media-minmax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-media-minmax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/postcss","download_url":"https://codeload.github.com/postcss/postcss-media-minmax/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248890419,"owners_count":21178425,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T13:39:19.696Z","updated_at":"2025-04-14T13:44:55.586Z","avatar_url":"https://github.com/postcss.png","language":"JavaScript","readme":"# PostCSS Media Minmax\n\n[![Build Status](https://travis-ci.org/postcss/postcss-media-minmax.svg?branch=master)](https://travis-ci.org/postcss/postcss-media-minmax) \n[![NPM Downloads](https://img.shields.io/npm/dm/postcss-media-minmax.svg?style=flat)](https://www.npmjs.com/package/postcss-media-minmax) \n[![NPM Version](http://img.shields.io/npm/v/postcss-media-minmax.svg?style=flat)](https://www.npmjs.com/package/postcss-media-minmax) \n[![License](https://img.shields.io/npm/l/postcss-media-minmax.svg?style=flat)](http://opensource.org/licenses/MIT) \n\n\u003e 写简单优雅的 Media Queries！\n\nMedia Queries 中的 `min-width` 和 `max-width` 等属性非常容易混淆，每次看到他们，我都想哭。现在[新的规范](https://drafts.csswg.org/mediaqueries/#mq-range-context)中，可以使用更加直观的 `\u003e=`或`\u003c=` 替代 media queries 中的 min-/max- 前缀。\n\n**V2.1.0 开始支持 `\u003e` 或 `\u003c` 符号。**\n\n这是一个实现 [CSS Media Queries Level 4](http://dev.w3.org/csswg/mediaqueries/) Polyfill 的插件，让你现在就可以使用这些特性，妈妈再也不用担心我记不住了，鹅妹子嘤！\n\n \n[English](README.md)\n\n-----\n\n![Gif Demo](http://gtms02.alicdn.com/tps/i2/TB1UIjyGVXXXXcCaXXXx274FpXX-877-339.gif)\n\n\n## 安装\n\n    $ npm install postcss-media-minmax\n\n## 快速开始\n\n示例 1：\n\n```js\nvar fs = require('fs')\nvar postcss = require('postcss')\nvar minmax = require('postcss-media-minmax')\n\nvar css = fs.readFileSync('input.css', 'utf8')\n\nvar output = postcss()\n  .use(minmax())\n  .process(css)\n  .css\n  \nconsole.log('\\n====\u003eOutput CSS:\\n', output)  \n```\n\n或者只需：\n\n```js\nvar output = postcss(minmax())\n  .process(css)\n  .css\n```\n\ninput.css：\n\n```css\n@media screen and (width \u003e= 500px) and (width \u003c= 1200px) {\n  .bar {\n    display: block;\n  }\n}\n```\n\n你将得到：\n\n```css\n@media screen and (min-width: 500px) and (max-width: 1200px) {\n  .bar {\n    display: block;\n  }\n}\n```\n\n## CSS 语法\n\n### [语法](http://dev.w3.org/csswg/mediaqueries/#mq-syntax)\n\n```\n\u003cmf-range\u003e = \u003cmf-name\u003e [ '\u003c' | '\u003e' ]? '='? \u003cmf-value\u003e\n           | \u003cmf-value\u003e [ '\u003c' | '\u003e' ]? '='? \u003cmf-name\u003e\n           | \u003cmf-value\u003e '\u003c' '='? \u003cmf-name\u003e '\u003c' '='? \u003cmf-value\u003e\n           | \u003cmf-value\u003e '\u003e' '='? \u003cmf-name\u003e '\u003e' '='? \u003cmf-value\u003e\n```\n\n![syntax](http://gtms03.alicdn.com/tps/i3/TB1Rje0HXXXXXXeXpXXccZJ0FXX-640-290.png)\n\nPostCSS Media Minmax 目前并没有实现 `200px \u003e= width` 或者 `200px \u003c= width` 这样的语法，因为这样的语法可读性并不不是太好。\n\n## [取值(Values)](http://dev.w3.org/csswg/mediaqueries/#values)\n \n**The special values:**\n\n* [\u003cratio\u003e](http://dev.w3.org/csswg/mediaqueries/#typedef-ratio)\n\n    \u003cratio\u003e 是一个正（非零非负）的 \u003cinteger\u003e（整型）取值，其后跟随0个或多个空白，接着跟随一个斜线（“/”），再跟随0个或多个空白，最后跟随一个正\u003cinteger\u003e。\n\n    ```css\n    @media screen and (device-aspect-ratio: 16 /   9) {\n      /* rules */\n    }\n\n    /* equivalent to */\n    @media screen and (device-aspect-ratio: 16/9) {\n      /* rules */\n    }\n    ```\n\n* [\u003cmq-boolean\u003e](http://dev.w3.org/csswg/mediaqueries/#typedef-mq-boolean)\n\n    \u003cmq-boolean\u003e 值是一个 0 或 1 的 \u003cinteger\u003e（整型）取值。其他任何整数无效。注意， 在 CSS 中 -0 总是等价于 0 的，所以也作为一种有效的 \u003cmq-boolean\u003e 取值。  \n\n    ```css\n    @media screen and (grid: -0) {\n      /* rules */\n    }\n\n    /* equivalent to */\n    @media screen and (grid: 0) {\n      /* rules */\n    }\n    ```\n\n## 如何使用\n\n### 简写\n\n示例 1中同一个 Media features name 同时存在 `\u003e=` 和 `\u003c=` 时，可以简写为：\n\n```css\n@media screen and (500px \u003c= width \u003c= 1200px) {\n  .bar {\n    display: block;\n  }\n}\n/* 或者 */\n@media screen and (1200px \u003e= width \u003e= 500px) {\n  .bar {\n    display: block;\n  }\n}\n```\n\n都会得到一样的输出结果：\n\n```css\n@media screen and (min-width: 500px) and (max-width: 1200px) {\n  .bar {\n    display: block;\n  }\n}\n```\n**注意**：当 Media features name 在中间的时候，一定要保证两个 `\u003c=` 或 `\u003e=` 的方向一致，否则不会转换。\n\n例如在下面的示例中，width 大于等于 500px 同时又大于等于 1200px，这在语法和逻辑上都是错误的。\n\n```css\n@media screen and (1200px \u003c= width \u003e= 500px) {\n  .bar {\n    display: block;\n  }\n}\n```\n\n### 支持的 Media features name\n\n规范中目前以下属性支持 min-/max 前缀，PostCSS Media Minmax 全部支持自动转换。\n\n* `width`\n* `height`\n* `device-width`\n* `device-height`\n* `aspect-ratio`\n* `device-aspect-ratio`\n* `color`\n* `color-index`\n* `monochrome`\n* `resolution`\n\n\n\n### 支持在 `@custom-media` 中使用 \u0026 Node Watch\n\n```js\nvar fs = require('fs')\nvar chokidar = require('chokidar')\nvar postcss = require('postcss')\nvar minmax = require('postcss-media-minmax')\nvar customMedia = require('postcss-custom-media')\n\nvar src = 'input.css'\n\nconsole.info('Watching…\\nModify the input.css and save.')\n\n\nchokidar.watch(src, {\n  ignored: /[\\/\\\\]\\./,\n  persistent: true\n}).on('all',\n  function(event, path, stats) {\n    var css = fs.readFileSync(src, 'utf8')\n    var output = postcss()\n      .use(customMedia())\n      .use(minmax())\n      .process(css)\n      .css;\n    fs.writeFileSync('output.css', output)\n  })\n\n```\n\n\ninput.css:\n\n```css\n@custom-media --foo (width \u003e= 20em) and (width \u003c= 50em);\n@custom-media --bar (height \u003e= 300px) and (height \u003c= 600px);\n\n@media (--foo) and (--bar) {\n  \n}\n```\n\noutput.css:\n\n```css\n@media (min-width: 20em) and (max-width: 50em) and (min-height: 300px) and (max-height: 600px) {\n  \n}\n```\n\n### Grunt\n\n```js\nmodule.exports = function(grunt) {\n  grunt.initConfig({\n    pkg: grunt.file.readJSON('package.json'),\n    postcss: {\n      options: {\n        processors: [\n          require('autoprefixer-core')({ browsers: ['\u003e 0%'] }).postcss, //Other plugin\n          require('postcss-media-minmax')(),\n        ]\n      },\n      dist: {\n        src: ['src/*.css'],\n        dest: 'build/grunt.css'\n      }\n    }\n  });\n\n  grunt.loadNpmTasks('grunt-contrib-uglify');\n  grunt.loadNpmTasks('grunt-postcss');\n\n  grunt.registerTask('default', ['postcss']);\n}\n```\n\n### Gulp\n\n```js\nvar gulp = require('gulp');\nvar rename = require('gulp-rename');\nvar postcss = require('gulp-postcss');\nvar selector = require('postcss-media-minmax')\nvar autoprefixer = require('autoprefixer-core')\n\ngulp.task('default', function () {\n    var processors = [\n        autoprefixer({ browsers: ['\u003e 0%'] }), //Other plugin\n        minmax()\n    ];\n    gulp.src('src/*.css')\n        .pipe(postcss(processors))\n        .pipe(rename('gulp.css'))\n        .pipe(gulp.dest('build'))\n});\ngulp.watch('src/*.css', ['default']);\n```\n\n\n## 贡献\n\n* 安装相关的依赖模块。\n* 尊重编码风格（安装 [EditorConfig](http://editorconfig.org/)）。\n* 在[test](test)目录添加测试用例。\n* 运行测试。\n\n```\n$ git clone https://github.com/postcss/postcss-media-minmaxs.git\n$ git checkout -b patch\n$ npm install\n$ npm test\n```\n\n## 致谢\n\n* 感谢 PostCSS 作者 [Andrey Sitnik](https://github.com/ai)，带给我们如此简单易用的 CSS 语法解析工具。\n* 感谢 [Tab Atkins Jr.](http://xanthir.com/contact/) 辛苦编写了 Media Queries Level 4 规范。\n* 感谢 [@紫云飞](http://weibo.com/p/1005051708684567) 对本插件的建议和帮助。\n\n## [Changelog](CHANGELOG.md)\n\n## [License](LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-media-minmax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpostcss%2Fpostcss-media-minmax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-media-minmax/lists"}