Media Queries Dimension

GENERAL DEVICE

Screen
$xl-screen: “only screen and (min-width : 1200px)”;
$large-screen: “only screen and (max-width : 1200px)”;
$medium-screen: “only screen and (max-width : 992px)”;

Tablet
$tablet: “only screen and (max-width : 768px)”;

Phone
$medium-phone: “only screen and (max-width : 480px)”;
$small-phone: “only screen and (max-width : 320px)”;

SPECIAL DEVICE

SCREEN

Non-retina
$non-retina: “screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1)”;

Retina Display
$retina: “screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)”;

Portrait and Landscape
$portrait-landscape: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1)”;

Portrait
$portrait: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)”;

Landscape
$landscape: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1)”;

IPAD 1 AND 2

Portrait and Landscape 
$ipad12-portrait-landscape: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1)”;

Portrait
$ipad12-portrait: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)”;

Landscape
$ipad12-landscape: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1)”;

IPAD 3 AND 4

Portrait and Landscape
$ipad34-portrait-landscape: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)”;

Portrait
$ipad34-portrait: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)”;

Landscape
$ipad34-landscape: “only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2)”;

GALAXY TAB

Portrait and Landscape
$galaxytab-portrait-landscape: “(min-device-width: 800px) and (max-device-width: 1280px)”;

Portrait
$galaxytab-portrait: “(max-device-width: 800px) and (orientation: portrait)”;

Landscape
$galaxytab-landscape: “(max-device-width: 1280px) and (orientation: landscape)”;

IPHONE 4

Portrait and Landscape
$iphone4-portrait-landscape: “only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)”;

Portrait
$iphone4-portrait: “only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)”;

Landscape
$iphone4-landscape: “only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)”;

IPHONE 5

Portrait and Landscape
$iphone5-portrait-landscape: “only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)”;

Portrait
$iphone5-portrait: “only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)”;

Landscape
$iphone5-landscape: “only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)”;

IPHONE 6

Portrait and Landscape
$iphone6-portrait-landscape: “only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)”;

Portrait
$iphone6-portrait: “only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)”;

Landscape
$iphone6-landscape: “only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)”;

IPHONE 6+

Portrait and Landscape
$iphone6p-portrait-landscape: “only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3)”;

Portrait
$iphone6p-portrait: “only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait)”;

Landscape
$iphone6p-landscape: “only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape)”;

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s