Zurb Foundation6 Media Queries default breakpoints and custom devices - WIP

_mediaQueries.scss

/************************************************
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