Using bower:
bower install sass-mediaqueries
Using npm:
npm install sass-mediaqueries
Using curl:
curl -O https://raw.githubusercontent.com/rafalbromirski/sass-mediaqueries/master/_media-queries.scss
Then at the top of your sass/scss file (ie. application.scss) add:
@import "media-queries";
You can preview all mixins that are included in the library by checking the demo page
mq($args...)
Generator allows you to create custom media-queries mixins by passing keywords arguments based on w3c media features specification (make sure you always provide key and value).
It's also a syntactic sugar for the standard media queries syntax (CSS).
@include mq($max-width: 1000px) {
...
}
// will generate
@media only screen and (max-width: 1000px) {
...
}
Creating new mixins (like max-screen) is even easier:
@mixin max-screen($max)
@include mq($max-width: $max) {
@content;
}
}
// usage
@include max-screen(1000px) {
...
}
// will generate
@media only screen and (max-width: 1000px) {
...
}
Or if you want to change $media-type and other properies:
@mixin custom-device($min, $max)
@include mq($media-type: 'all', $min-width: $min, $max-width: $max) {
@content;
}
}
// usage
@include custom-device(500px, 1000px) {
...
}
// will generate
@media all and (min-width: 500px) and (max-width: 1000px) {
...
}
How cool is that?
@ screen(min-width, max-width, orientation)
@ min-screen(width)
@ max-screen(width)
--
@ screen-height(min-height, max-height, orientation)
@ min-screen-height(height)
@ max-screen-height(height)
--
@ hdpi(ratio)
--
@ landscape
@ portrait
--
@ iphone4(orientation)
@ iphone5(orientation)
@ iphone6(orientation)
@ iphone6-plus(orientation)
--
@ ipad(orientation)
@ ipad-retina(orientation)
--
@ hdtv(standard)
It targets group of devices or just one with particular screen width and orientation (optional).
@include screen(320px, 640px) { ... }
@include screen(768px, 1024px, landscape) { ... }
It will be compiled to:
@media screen and (min-width: 768px) and (max-width: 1280px) { ... }
@media screen and (min-width: 320px) and (max-width: 640px) and (orientation: landscape) { ... }
It's a shortcut for @media screen and (min-width ... )
@include min-screen(768px) { ... }
@include min-screen(1024px) { ... }
It will be compiled to:
@media screen and (min-width: 768px) { ... }
@media screen and (min-width: 1024px) { ... }
It's a shortcut for @media screen and (max-width ... )
@include max-screen(1024px) { ... }
@include max-screen(768px) { ... }
It will be compiled to:
@media screen and (max-width: 1024px) { ... }
@media screen and (max-width: 768px) { ... }
It targets group of devices or just one with particular screen height and orientation (optional).
@include screen-height(640px, 768px) { ... }
@include screen-height(640px, 768px, landscape) { ... }
It will be compiled to:
@media screen and (min-height: 768px) and (max-height: 1280px) { ... }
@media screen and (min-height: 768px) and (max-height: 1280px) and (orientation: landscape) { ... }
It's a shortcut for @media screen and (min-height ... )
@include min-screen-height(768px) { ... }
@include min-screen-height(1024px) { ... }
It will be compiled to:
@media screen and (min-height: 768px) { ... }
@media screen and (min-height: 1024px) { ... }
It's a shortcut for @media screen and (max-height ... )
@include max-screen-height(1024px) { ... }
@include max-screen-height(768px) { ... }
It will be compiled to:
@media screen and (max-height: 1024px) { ... }
@media screen and (max-height: 768px) { ... }
It targets devices with hdpi display.
.brand {
background-image: url(logo.png);
@include hdpi {
background-image: url(logo_2x.png);
}
}
Both mixins target different screen orientations.
@include landscape { ... }
@include portrait { ... }
It targets only iPhone 4 + orientation
@include iphone4 { ... }
@include iphone4(landscape) { ... }
@include iphone4(portrait) { ... }
It targets only iPhone 5 + orientation
@include iphone5 { ... }
@include iphone5(landscape) { ... }
@include iphone5(portrait) { ... }
It targets only iPhone 6 + orientation
@include iphone6 { ... }
@include iphone6(landscape) { ... }
@include iphone6(portrait) { ... }
It targets only iPhone 6 Plus + orientation
@include iphone6-plus { ... }
@include iphone6-plus(landscape) { ... }
@include iphone6-plus(portrait) { ... }
It targets only iPads + orientation
@include ipad { ... }
@include ipad(landscape) { ... }
@include ipad(portrait) { ... }
It targets only iPads with retina display + orientation
@include ipad-retina { ... }
@include ipad-retina(landscape) { ... }
@include ipad-retina(portrait) { ... }
Available standards: 720p,1080, 2K, 4K
.title {
font-size: 5vm;
@include hdtv {
font-size: 10vm;
}
@include hdtv('4K') {
font-size: 15vm;
}
}