Sass Media Queries: Collection of media queries breakpoint variables written in sass.

media-queries.scss

/**
 * Sass-Ready media queries
 * Here there are some presets of useful
 * media queries breakpoints for various devices
 * Usage: @media #{variable-name} { }
 * and it will compile to: @media variable-name { }
 *
 */

// Devices
$desktops-laptops: "only screen and (min-width : 1224px)";
$large-screens: "only screen and (min-width : 1824px)";
$ipads-both: "only screen and (min-device-width : 768px) and (max-device-width : 1024px)";
$ipads-landscape: "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)";
$ipads-portrait: "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)";
$iphone-4: "only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)";
$smartphones-both: "only screen and (min-device-width : 320px) and (max-device-width : 480px)";
$smartphones-landscape: "only screen and (min-width : 321px)";
$smartphones-portrait: "only screen and (max-width : 320px)";

// Pixel Rateos
$ldpi-screens: "screen and (-webkit-device-pixel-ratio: 0.75)";
$mdpi-screens: "screen and (-webkit-device-pixel-ratio: 1.0)";
$hdpi-screens: "screen and (-webkit-device-pixel-ratio: 1.5)";
$retina-screens: "screen and (-webkit-device-pixel-ratio: 2.0)";

// Wearables
$apple-watch: "(max-device-width: 42mm) and (min-device-width: 38mm)";
$moto360-watch: "(max-device-width: 218px) and (max-device-height: 281px)";