Skip to content

Instantly share code, notes, and snippets.

@mlangone
Last active March 22, 2018 00:22
Show Gist options
  • Save mlangone/de6c3c2655de292a5f83e84d69a8ae19 to your computer and use it in GitHub Desktop.
Save mlangone/de6c3c2655de292a5f83e84d69a8ae19 to your computer and use it in GitHub Desktop.
Zurb Foundation6 Media Queries default breakpoints and custom devices - WIP
/************************************************
Stylesheet: Media Queries
*************************************************/
// Media Queries
$screen: "only screen" !default;
$breakpoints: (
small: 480px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
$retina: (
"#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
"#{$screen} and (min--moz-device-pixel-ratio: 2)",
"#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
"#{$screen} and (min-device-pixel-ratio: 2)",
"#{$screen} and (min-resolution: 192dpi)",
"#{$screen} and (min-resolution: 2dppx)"
);
/* min-width 480px */
@media screen and #{breakpoint(small)} {}
/* min-width 480px and max-width 640px */
@media screen and #{breakpoint(small only)} {}
/* min-width 641px */
@media screen and #{breakpoint(medium)} {}
/* min-width 641px(medium) and max-width 1023px(large) */
@media screen and #{breakpoint(medium only)} {}
/* min-width 1024px */
@media screen and #{breakpoint(large)} {}
/* min-width 1024px(large) and max-width 1199px(xlarge) */
@media screen and #{breakpoint(large only)} {}
/* min-width 1200px */
@media screen and #{breakpoint(xlarge)} {}
/* min-width 1200px(large) and max-width 1399px(xlarge) */
@media screen and #{breakpoint(xlarge only)} {}
/* Use when QAing large screen-only issues like ipad landscape */
// Retina and portrait ipad
@media screen and #{breakpoint(medium)} and #{breakpoint(large down)} and #{breakpoint(retina)} {
// end iPad query
}
// Lets target in portrait the key is the device pixel ratio
// Tested Galaxy 7, s6
// Portrait
@media screen and (-webkit-min-device-pixel-ratio: 2.0) and #{breakpoint(360px)} and #{breakpoint(640px down)} and #{breakpoint(portrait)} {
// end PORTRAIT query
}
// Landscape
@media screen and (-webkit-min-device-pixel-ratio: 2.0) and #{breakpoint(360px)} and #{breakpoint(640px down)} and #{breakpoint(landscape)} {
// end LANDSCAPE query
}
// PORTRAIT with Galaxy s8+, Pixel Pixel XL PIXEL 2, iPhone 8+ iPhone 8 iPhone 7
@media screen and (-webkit-min-device-pixel-ratio: 2.0) and (min-device-width: 360px) and (max-device-width: 740px) and (orientation: portrait) {
// end portrait query
}
// Lets target S8+ first in landscape - SET MAX breakpoint using down or else macpro picks it up
@media screen and (-webkit-min-device-pixel-ratio: 2.0) and #{breakpoint(360px)} and #{breakpoint(740px down)} and #{breakpoint(landscape)} {
// end LANDSCAPE query
}
// Note8 in landscape if needed
@media screen and (-webkit-min-device-pixel-ratio: 2.0) and #{breakpoint(411px)} and #{breakpoint(845px down)} and #{breakpoint(landscape)} {
// End NOTE8 Landscape
}
// Lets Google Pixel XL in landscape device-pixel-ratio of 2 (covers pixel and pixel xl if you need to target the xl use dpr 3)
@media screen
and (-webkit-min-device-pixel-ratio: 2)
and #{breakpoint(landscape)}
and #{breakpoint(411px)}
and #{breakpoint(731px down)} {
// End pixel xl landscape
}
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
// end LANDSCAPE query
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
// end LANDSCAPE query
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
// TODO: add range for super small devices between 320 and 480 - ML
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment