// Media Queries in Sass 3.2 | |
// | |
// These mixins make media queries a breeze with Sass. | |
// The media queries from mobile up until desktop all | |
// trigger at different points along the way | |
// | |
// And important point to remember is that and width | |
// over the portrait width is considered to be part of the | |
// landscape width. This allows us to capture widths of devices | |
// that might not fit the dimensions exactly. This means the break | |
// points are seamless. | |
$mq-mobile-portrait : 320px !default; | |
$mq-mobile-landscape : 480px !default; | |
$mq-tablet-portrait : 768px !default; | |
$mq-tablet-landscape : 1024px !default; | |
$mq-desktop : 1382px !default; | |
// Both portrait and landscape | |
@mixin mobile-only { | |
@media (max-width : $mq-mobile-landscape) { | |
@content; | |
} | |
} | |
// Everything up to and including the portrait width of the phone | |
// Since it's the smallest query it doesn't need a min | |
@mixin mobile-portrait-only { | |
@media (max-width : $mq-mobile-portrait) { | |
@content; | |
} | |
} | |
// Everything up to and including the mobile portrait | |
@mixin mobile-portrait-and-below { | |
@media (max-width : $mq-mobile-portrait) { | |
@content; | |
} | |
} | |
// Everything above and including the mobile portrait | |
@mixin mobile-portrait-and-up { | |
@media (min-width : $mq-mobile-portrait) { | |
@content; | |
} | |
} | |
// Everthing larger than a portrait mobile up until mobile landscape | |
@mixin mobile-landscape-only { | |
@media only screen and (min-width : $mq-mobile-portrait + 1) and (max-width : $mq-mobile-landscape) { | |
@content; | |
} | |
} | |
// Everything up to and including the mobile landscape width | |
@mixin mobile-landscape-and-below { | |
@media only screen and (max-width : $mq-mobile-landscape) { | |
@content; | |
} | |
} | |
// Everything above and including the mobile landscape width | |
@mixin mobile-landscape-and-up { | |
@media only screen and (min-width : $mq-mobile-portrait + 1) { | |
@content; | |
} | |
} | |
// Both the portrait and landscape width of the tablet | |
// Larger than a landscape mobile but less than or equal to a landscape tablet | |
@mixin tablet-only { | |
@media only screen and (min-width : $mq-mobile-landscape + 1) and (max-width : $mq-tablet-landscape) { | |
@content; | |
} | |
} | |
// Everything larger than mobile landscape up until the portrait width of the tablet | |
@mixin tablet-portrait-only { | |
@media only screen and (min-width : $mq-mobile-landscape + 1) and (max-width : $mq-tablet-portrait) { | |
@content; | |
} | |
} | |
// Everything below and including the portrait width of the tablet | |
@mixin tablet-portrait-and-below { | |
@media only screen and (max-width : $mq-tablet-portrait) { | |
@content; | |
} | |
} | |
// Everything above and including the portrait width of the tablet | |
@mixin tablet-portrait-and-up { | |
@media only screen and (min-width : $mq-mobile-landscape + 1) { | |
@content; | |
} | |
} | |
// Larger than portrait but less than or equal to the landscape width | |
@mixin tablet-landscape-only { | |
@media only screen and (min-width : $mq-tablet-portrait + 1) and (max-width : $mq-tablet-landscape) { | |
@content; | |
} | |
} | |
// Up to and including the tablet landscape | |
@mixin tablet-landscape-and-below { | |
@media only screen and (max-width : $mq-tablet-landscape) { | |
@content; | |
} | |
} | |
// Everything larger than portrait tablet | |
@mixin tablet-landscape-and-up { | |
@media only screen and (min-width : $mq-tablet-portrait + 1) { | |
@content; | |
} | |
} | |
// Everything larger than a landscape tablet | |
@mixin desktop-and-up { | |
@media only screen and (min-width : $mq-tablet-landscape + 1) { | |
@content; | |
} | |
} | |
// Everything below and including the desktop | |
@mixin desktop-and-below { | |
@media only screen and (max-width : $mq-desktop) { | |
@content; | |
} | |
} | |
// Everything larger than a landscape tablet but less than or equal to the desktop | |
@mixin desktop-only { | |
@media only screen and (min-width : $mq-tablet-landscape + 1) and (max-width : $mq-desktop) { | |
@content; | |
} | |
} | |
// Retina screens have a 1.5 pixel ratio, not 2 | |
@mixin retina { | |
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { | |
@content; | |
} | |
} |
This comment has been minimized.
This comment has been minimized.
andresgutgon
commented
Mar 13, 2012
How use that. Can you post an example please ? Ej.: |
This comment has been minimized.
This comment has been minimized.
moeffju
commented
Mar 13, 2012
+retina
selector
more-content: yes
your-content: here |
This comment has been minimized.
This comment has been minimized.
|
This comment has been minimized.
This comment has been minimized.
@hagenburger I'm trying to accommodate for that style too by using -up, -only and -below. This should let you control how the media query properties affect larger and smaller displays. That way you can have styles that target mobile phones specifically or avoid them completely. |
This comment has been minimized.
This comment has been minimized.
MoOx
commented
Mar 13, 2012
Why did you use
|
This comment has been minimized.
This comment has been minimized.
Good point, the screen limitation should be ditched I think. |
This comment has been minimized.
This comment has been minimized.
emrecamasuvi
commented
Mar 13, 2012
Looks nice. |
This comment has been minimized.
This comment has been minimized.
In a single stylesheet, yeah, you'd be stupid to use all of these at once. I've included a lot of them so that it can support many use cases. People use media queries in a lot of different ways. |
This comment has been minimized.
This comment has been minimized.
emrecamasuvi
commented
Mar 13, 2012
gotcha. i'll take four; widescreen (including retina), default, "tablet portrait" and iphone. |
This comment has been minimized.
This comment has been minimized.
Something like this
|
This comment has been minimized.
This comment has been minimized.
MoOx
commented
Mar 14, 2012
Here is my try on this https://github.com/MoOx/compass-recipes/blob/master/stylesheets/recipes/_media-queries.scss |
This comment has been minimized.
This comment has been minimized.
hagenburger
commented
Mar 14, 2012
@MoOx: I think “table”, “phone”, … are more easy to understand than M, L, XL, …—especially for new devs in the team. |
This comment has been minimized.
This comment has been minimized.
MoOx
commented
Mar 14, 2012
@hagenburger You're right & I know that. What I've done is clearly not finished. I'm not happy with this names.
|
This comment has been minimized.
This comment has been minimized.
We are still designing for screen sizes, it's just using semantics that are easier for people to understand. 'phone' is extra small, 'tablet' is small, 'desktop' is medium and so forth. If we're basically aiming for those devices we might as well use names we can remember :) But there's definitely some parts that I'll borrow from yours. Might want to check and see if that compiles though. I know in the current version of sass you can't do variables in media queries. That might be fixed up now though. |
This comment has been minimized.
This comment has been minimized.
MoOx
commented
Mar 14, 2012
You'r right. |
This comment has been minimized.
This comment has been minimized.
Bit more research to do with common device widths: http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning Specifically, this image - http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png Judging from this I'd say it would be best to use the points:
I'll need to do some more testing though. |
This comment has been minimized.
This comment has been minimized.
MoOx
commented
Mar 15, 2012
Really interesting source.I like the "6 layouts". Maybe I will do something fluid enough to be able to use 3, 4 or 6 layouts as you wish. Hard to code maybe. |
This comment has been minimized.
This comment has been minimized.
anointed
commented
Mar 21, 2012
Having a few issues on my end trying to implement this concept. I started by copying the gist above and saving it to my project as _media-queries.scss When I simply @import "media-queries" into my working scss file I get the following error: It seems to get stuck at the initial import rule. Is there a different vs. of Sass or something that I should be using to solve this error? |
This comment has been minimized.
This comment has been minimized.
@anointed I'm fairly sure you'll need a more recent version of the Sass alpha |
This comment has been minimized.
This comment has been minimized.
anointed
commented
Jun 21, 2012
thnx, all sorted now |
This comment has been minimized.
This comment has been minimized.
bhargav2785
commented
Jun 1, 2013
are you updating it right now ? |
This comment has been minimized.
This comment has been minimized.
jpweller
commented
Apr 29, 2014
Are you still using this? I just implemented it and love it so far. Just curious if you still use it in your work flow. The only drawback I found is it generates a ton of excess media queries once compiled. But I found a Grunt plugin to combine them so its ok. |
This comment has been minimized.
This comment has been minimized.
davidnormo
commented
May 5, 2014
Thanks anthonyshort, very helpful little gist. To summerise:
|
This comment has been minimized.
This comment has been minimized.
hdodov
commented
Jun 8, 2017
Here is my take on a media query mixin. There's less hardcoding involved and it supports as many screen sizes as you wish because it utilizes maps and functions. It's not that better than this gist, but is DRYer. |
This comment has been minimized.
This comment has been minimized.
gempir
commented
Feb 23, 2018
@anthonyshort what is this licensed under? |
This comment has been minimized.
hagenburger commentedMar 13, 2012
Like it. I often use it the other way round: I serve the phone layout for everything smaller than a tablet instead of serving the tablet layout for everything bigger than a phone.