Media queries

When working with responsive media queries, Furatto will help you more than you may think. We have provided a set of helpful media query mixins with really cool names. Kudos to Rafal Bromirski.

Responsive queries at a glance.

We have been working with rsponsive design for a while now, and the problem alwats is, we don't always remember the full syntax for let's say a set fo rules for a phone. It is a really pain when building responsive websites, most of the times media queries are the same and is a pain to keep writing them.

So based on Rafal Bromirski media queries we expose a set of handy media queries with more readable and rememberable names.

A quick example to define a set of css rules for a phone is provided below.

Full media query

      
  @media only screen and (min-width: 320px) and (max-width: 480px) {
    //Your set of rules
  }

Furatto mixin

      
  .class-name {
    //Regular css rules
    
    @include phone {
      //Your awesome respnsive rules. Cool isn't it?
    }
  }

Getting to know them all

Here is a quick list on the media queries that Furatto supports, but if you feel brave, you can always follow the source. Your responsive development would never be the same.

Mixin name	Params	Source
screen	$resMin - The minimal resolution width $resMax - The max resolution width	`@media #{$media-display} and (min-width: $resMin) and (max-width: $resMax)`
max-screen	$res - The max resolution width	`@media #{$media-display} and (max-width: $res)`
min-screen	$res - The minimal resolution width	`@media #{$media-display} and (min-width: $res)`
screen-height	$resMin - The minimal resolution height $resMax - The max resolution height	`@media #{$media-display} and (min-height: $resMin) and (max-height: $resMax)`
max-screen-height	$res - The max resolution height	`@media #{$media-display} and (max-height: $res)`
min-screen-height	$res - The minimal resolution height	`@media #{$media-display} and (min-height: $res)`
hdpi	$ratio - The ratio value. Default: 1.3	`@media only screen and (-webkit-min-device-pixel-ratio: $ratio), only screen and (min--moz-device-pixel-ratio: $ratio), only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), only screen and (min-resolution: #{round($ratio*96)}dpi), only screen and (min-resolution: #{$ratio}dppx)`
phone	N/A	`@media #{$media-display} and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)`
iphone4	$orientation - The iphone orientation. Default: all	`@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)`
iphone5	$orientation - The iphone orientation. Default: all	`@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)`
ipad	$orientation - The iphone orientation. Default: all	`@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)`
ipad-retina	$orientation - The iphone orientation. Default: all	`@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio)`

Follow the source

We just scratch the surface of the media queries, for you to get started, but you ae always welcome to check out the source file, for further functionality.

Search for documentation

Media queries

Responsive queries at a glance.

Getting to know them all

Follow the source