Menu icon Foundation
Which are the actual default breakpoints ?

// Media Queries
$small-screen: 768px !default;
$medium-screen: 1280px !default;
$large-screen: 1440px !default;        

         

// Here we define the lower and upper bounds for each media size
$small-range: (0em, 40em); /* 0, 640px */
$medium-range: (40.063em, 64em); /* 641px, 1024px */
$large-range: (64.063em, 90em); /* 1025px, 1440px */
$xlarge-range: (90.063em, 120em); /* 1441px, 1920px */
$xxlarge-range: (120.063em); /* 1921px */     

         

So, what's the real deal between these two ?

mediaqueriesbreakpoints

// Media Queries
$small-screen: 768px !default;
$medium-screen: 1280px !default;
$large-screen: 1440px !default;        

         

// Here we define the lower and upper bounds for each media size
$small-range: (0em, 40em); /* 0, 640px */
$medium-range: (40.063em, 64em); /* 641px, 1024px */
$large-range: (64.063em, 90em); /* 1025px, 1440px */
$xlarge-range: (90.063em, 120em); /* 1441px, 1920px */
$xxlarge-range: (120.063em); /* 1921px */     

         

So, what's the real deal between these two ?

This post has been closed. No new replies can be added.

Rafi Benkual almost 6 years ago

The document has now been updated. Thanks for the heads up.

The new break points are http://foundation.zurb.com/docs/media-queries.html

$small-range: (0em, 40em); /* 0, 640px /
$medium-range: (40.063em, 64em); /
641px, 1024px /
$large-range: (64.063em, 90em); /
1025px, 1440px /
$xlarge-range: (90.063em, 120em); /
1441px, 1920px /
$xxlarge-range: (120.063em); /
1921px */

Ghaida Zahran almost 6 years ago

That page seems to have slipped through the cracks, and is showing the old global styles. The correct media queries are on the Media Queries page in the docs.

The new media queries are based on the following ranges that Rafi already called out. They're structured a little differently than in F4. We use the lower and upper bounds to set the ranges for each media size.

We then define our media queries in variables based on this example structure: $medium-up, and $medium-only.

the [size]-up queries are what we use for our grid. These contain min-width only and should be used for building your site. We included the [size]-only queries to help you target and QA for a specific media size. The latter queries are built using min-width and max-width based on the lower and upper bounds of the media size ranges.

Here are the media queries you can use in your sass:

@media #{$small-up} { }
@media #{$small-only} { }

@media #{$medium-up} { }
@media #{$medium-only} { }

@media #{$large-up} { }
@media #{$large-only} { }

@media #{$xlarge-up} { }
@media #{$xlarge-only} { }

@media #{$xxlarge-up} { }
@media #{$xxlarge-only} { }

The grid uses $medium-up for the .medium-# classes, and $large-up for the .large-# classes.

Adam Johnson almost 6 years ago

Good question, these two look a little confusing at first.

The variables in global are aimed at the grid classes, .large-6 .medium-8 .small-12, see:
HTML
<a href="http://foundation.zurb.com/docs/components/grid.html">http://foundation.zurb.com/docs/components/grid.html</a>

The ranges give you greater control over the layout when you may want to style things a little differently in a media query. This lets you create a much more fluid layout rather than sticking to common mobile, tablet and desktop view ports sizes that the small/medium/large screen variables set.

Hopefully that makes more sense.

Xandros almost 6 years ago

Thanks Adam, so this means that the small/medium/large grid breakpoints increased from 640/1024 in F4 to 768/1280 in F5 ?

Xandros almost 6 years ago

You're welcome Rafi ! That does indeed clear the things up.

So now instead of small/large grid in F4 4.3, small/medium/large grid in the temporary grid_5.css, we now get 5 sizes, very neat !