Media() 
Media() lets you use the media() function to assign responsive values to a declaration, following the CSS Media Expressions specification.
/* before */
h1 {
font-size: media(
16px,
(min-width: 600px) 20px,
(min-width: 1000px) 40px,
(min-width: 1400px) 60px
);
}
/* after */
h1 {
font-size: 16px;
}
@media (min-width: 600px) {
h1 {
font-size: 20px;
}
}
@media (min-width: 1000px) {
h1 {
font-size: 40px;
}
}
@media (min-width: 1400px) {
h1 {
font-size: 60px;
}
}Usage
Add Media() to your build tool:
npm install postcss-media-fn --save-devNode
require('postcss-media-fn').process(YOUR_CSS, { /* options */ });PostCSS
Add PostCSS to your build tool:
npm install postcss --save-devLoad Media() as a PostCSS plugin:
postcss([
require('postcss-media-fn')({ /* options */ })
]).process(YOUR_CSS, /* options */);Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-devEnable Media() within your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('postcss-media-fn')({ /* options */ })
])
).pipe(
gulp.dest('.')
);
});Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-devEnable Media() within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-media-fn')({ /* options */ })
]
},
dist: {
src: '*.css'
}
}
});
