Skip to content

Instantly share code, notes, and snippets.

@hulkish

hulkish/media-queries.less

Forked from remainstheday/media-queries.less
Last active August 29, 2015 14:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hulkish/002990ee152d857d407a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hulkish/002990ee152d857d407a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
media-queries.less
/* === Responsive Breakpoint Values === */
// XL Breakpoint: 1025px - 1200px; (desktop and up)
// L Breakpoint: 769px - 1024px; (tablet landscape)
// M Breakpoint: 706px - 768px; (tablet portrait)
// S Breakpoint: 481px - 705px; (mobile landscape)
// XS Breakpoint: 320px - 480px; (mobile portrait)
/* === LESS variables === */
@mq-desktop : 1025px;
@mq-tablet-landscape : 769px;
@mq-tablet-portrait : 706px;
@mq-mobile-landscape : 481px;
@mq-mobile-portrait : 320px;
/* mobile portrait and landscape */
.mobile-only(@content) {
@media (max-width : @mq-mobile-landscape) {
@content();
}
}
/* everything up to mobile mobile portrait only */
.mobile-portrait-only(@content) {
@media (max-width : @mq-mobile-portrait) {
@content();
}
}
/* everything up to and including the mobile portrait */
.mobile-portrait-and-below(@content) {
@media (max-width : @mq-mobile-portrait) {
@content();
}
}
/* the mobile portrait and everything above */
.mobile-portrait-and-up(@content) {
@media (min-width : @mq-mobile-portrait) {
@content();
}
}
/* anything larger than a mobile portrait up to mobile landscape */
.mobile-landscape-only(@content) {
@media only screen and (min-width : @mq-mobile-portrait + .001) and (max-width : @mq-mobile-landscape) {
@content();
}
}
/* anything including mobile landscape and everything below that */
.mobile-landscape-and-below(@content) {
@media only screen and (max-width : @mq-mobile-landscape) {
@content();
}
}
/* Everything above and including the mobile landscape width */
.mobile-landscape-and-up(@content) {
@media only screen and (min-width : @mq-mobile-portrait + .001) {
@content();
}
}
.tablet-only(@content) {
@media only screen and (min-width : @mq-mobile-landscape + .001) and (max-width : @mq-tablet-landscape) {
@content();
}
}
.tablet-portrait-only(@content) {
@media only screen and (min-width : @mq-mobile-landscape + .001) and (max-width : @mq-tablet-portrait) {
@content();
}
}
// Everything below and including the portrait width of the tablet
.tablet-portrait-and-below(@content) {
@media only screen and (max-width : @mq-tablet-portrait) {
@content();
}
}
// Everything above and including the portrait width of the tablet
.tablet-portrait-and-up(@content) {
// @media only screen and (min-width : $mq-mobile-landscape + 1) {
@media only screen and (min-width : @mq-tablet-portrait + .001) {
@content();
}
}
/* Larger than portrait but less than or equal to the landscape width */
.tablet-landscape-only(@content) {
@media only screen and (min-width : @mq-tablet-portrait + .001) and (max-width : @mq-tablet-landscape) {
@content();
}
}
.tablet-landscape-and-below(@content) {
@media only screen and (max-width : @mq-tablet-landscape) {
@content();
}
}
.tablet-landscape-and-up(@content) {
@media only screen and (min-width : @mq-tablet-portrait + .001) {
@content();
}
}
.desktop-and-up(@content) {
@media only screen and (min-width : @mq-tablet-landscape + .001) {
@content();
}
}
.desktop-and-below(@content) {
@media only screen and (max-width : @mq-desktop) {
@content();
}
}
.desktop-only(@content) {
@media only screen and (min-width : @mq-tablet-landscape + .001) and (max-width : @mq-desktop) {
@content();
}
}
.retina(@content) {
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
@content();
}
}
Raw
media-queries.sass
/* === Responsive Breakpoint Values === */
// XL Breakpoint: 1025px - 1200px; (desktop and up)
// L Breakpoint: 769px - 1024px; (tablet landscape)
// M Breakpoint: 706px - 768px; (tablet portrait)
// S Breakpoint: 481px - 705px; (mobile landscape)
// XS Breakpoint: 320px - 480px; (mobile portrait)
/* === SASS variables === */
$mq-desktop : 1025px;
$mq-tablet-landscape : 769px;
$mq-tablet-portrait : 706px;
$mq-mobile-landscape : 481px;
$mq-mobile-portrait : 320px;
@mixin mobile-only {
@media (max-width : $mq-mobile-landscape) {
@content;
}
}
@mixin mobile-portrait-only {
@media (max-width : $mq-mobile-portrait) {
@content;
}
}
@mixin mobile-portrait-and-below {
@media (max-width : $mq-mobile-portrait) {
@content;
}
}
@mixin mobile-portrait-and-up {
@media (min-width : $mq-mobile-portrait) {
@content;
}
}
@mixin mobile-landscape-only {
@media only screen and (min-width : $mq-mobile-portrait + .001) and (max-width : $mq-mobile-landscape) {
@content;
}
}
@mixin mobile-landscape-and-below {
@media only screen and (max-width : $mq-mobile-landscape) {
@content;
}
}
@mixin mobile-landscape-and-up {
@media only screen and (min-width : $mq-mobile-portrait + .001) {
@content;
}
}
@mixin tablet-only {
@media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-landscape) {
@content;
}
}
@mixin tablet-portrait-only {
@media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-portrait) {
@content;
}
}
@mixin tablet-portrait-and-below {
@media only screen and (max-width : $mq-tablet-portrait) {
@content;
}
}
@mixin tablet-portrait-and-up {
// @media only screen and (min-width : $mq-mobile-landscape + 1) {
@media only screen and (min-width : $mq-tablet-portrait + .001) {
@content;
}
}
@mixin tablet-landscape-only {
@media only screen and (min-width : $mq-tablet-portrait + .001) and (max-width : $mq-tablet-landscape) {
@content;
}
}
@mixin tablet-landscape-and-below {
@media only screen and (max-width : $mq-tablet-landscape) {
@content;
}
}
@mixin tablet-landscape-and-up {
@media only screen and (min-width : $mq-tablet-portrait + .001) {
@content;
}
}
@mixin desktop-and-up {
@media only screen and (min-width : $mq-tablet-landscape + .001) {
@content;
}
}
@mixin desktop-and-below {
@media only screen and (max-width : $mq-desktop) {
@content;
}
}
@mixin desktop-only {
@media only screen and (min-width : $mq-tablet-landscape + .001) and (max-width : $mq-desktop) {
@content;
}
}
@mixin retina {
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment