Media Queries for modern devices!

Sass Modern MQ is a mixin that helps you to create simple and accurate media queries by rethinking layouts as landscape, square and portrait

3 main breakpoints, based on aspect-ratio

portrait, square, landscape

█ → ▐█▌ → ███

portrait is the lowest breakpoint*, and landscape is the highest**, keep this order in mind

Combinable with 4 operators*

>, <, >=, <=

examples: >portrait, or <=square

*portrait doesn't have <, <=, & >= operators, and **landscape doesn't have >, >=, & <= operators

Install

npm install sass-modern-mq --save
// or
yarn add sass-modern-mq

Usage

@import "sass-modern-mq";

.my-class {
  @include mq("landscape") {
    // for landscape only
  }
  @include mq(">portrait") {
    // for square and landscape
  }
  @include mq(">=square") {
    // for square and landscape
  }
  @include mq("portrait", "landscape") {
    // for portrait or landscape
  }
  @include mq("square and (min-device-pixel-ratio:2)") {
    // you can combine it with standard media queries :)
  }
}

Since 1.0.1 you can also use it in @media:

@import "sass-modern-mq";

$my-breakpoint: mq("portrait and width>small");

.my-class {
  @media ($my-breakpoint) {
     // yay!
  }
}

Optional breakpoints: width, height and retina

Ratios breakpoints are the main purpose of this library, and in most of the cases it's enough.
But if needed, you can enable additional width, height and retina breakpoints

$mq-enable-width-breakpoints: true;
$mq-enable-height-breakpoints: true;
$mq-enable-retina-breakpoints: true;

.my-class {
  @include mq("retina") {
    // for retina screens
  }
  @include mq("width=small") {
    // for small width screens only
  }
  @include mq("height>medium") {
    // for greater than medium height screens only
  }
}

You can custom sizes with the variables $mq-xsmall, $mq-small, $mq-medium, $mq-large, $mq-xlarge

Debug helper

Look at the right top of the Codesandbox playground and resize the window, the debug helper tells you instantly wich breakpoints are active!

// in your .scss file
$mq-debug: true;

// in your .js file (it just adds dynamicly the HTML markup)
import "sass-modern-mq/debug.js";

Play now on Codesandbox!

<iframe loading="lazy" src="https://codesandbox.io/embed/sass-modern-mq-playground-0sqv2?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fstyles.scss&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="Sass Modern MQ Playground" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe>

Why 'modern'?

Because with modern devices, the paradigm as changed! The current CSS/Sass libraries base their breakpoints on the device width, wich is (for me) not relevant anymore.

If we take Bootstrap, one of the most popular CSS library, their default breakpoints are xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px

But let's take some modern devices examples (thanks screensiz.es):

• iPhone X viewport's width is 812px in landscape mode

• Apple Watch viewport's width is 197px.

• Apple iMac 27-inch viewport's width is 2560px

Note: I choose Apple devices because they are popular, not to promote them (I have a Dell computer and a Samsung smartphone!)

How can we handle these cases with width-based approach, when the lowest breakpoint for Bootstrap is 576px, and the highest is 1400px, without complexity, and with accuracy?

This where Sass Modern MQ takes an other approach.

Rethinking responsive layouts?

As a senior webdesigner and front-end developper, and after integrating many layouts with many breakpoints, I finally came accross the conclusion that every resolution cases can fit in 3 types: Landscape, Square and Portrait

Wich is a ratio-based approach.

So now I try to think my design layouts with these 3 types in mind, and I hope this will be relevant for you!

How it works?

In CSS Media Queries spec, we have aspect-ratio.

Instead of the classical width-based approach:

@media (max-width: 992px) { ...

Sass Modern MQ use a ratio-based approach:

@media (aspect-ratio: 10/8) { ...

Changelog

• 1.0.0 : /!\ the order has changed, before 1.0.0 it was landscape > square > portrait, and now it's portrait > square > landscape, because it's more intuitive.
• 1.0.1 : add mq function to use it in @media

Todo list

• Write tests (any help is welcome!)
• Check browser compatibilty, but probably 98%?
• Thanks