Menu icon Foundation
Media Queries for Retina Display

I am trying to display a different image depending on the screen size. In addition, I would like to provide a different background image for retina displays or those which a higher pixel ratio. Here is the relevant code from scss and the page.

Is there a way to combine the breakpoints for retina and one of the size breakpoints together?

@include breakpoint() allows you to specify one but not both.

scss

.hero {
  height: 240px;
  @include breakpoint(medium) { height: 360px; }
  @include breakpoint(large) { height: 480px; }
  @include breakpoint(xlarge) { height: 540px; }
  @include breakpoint(xxlarge) { height: 640px; }
}

.home, .about-us, .careers, .contracts, .what-we-do {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.home {
  background-image: url('../img/home_bg_small.jpg');
  @include breakpoint(medium) { background-image: url('../img/home_bg_medium.jpg'); }
  @include breakpoint(large) { background-image: url('../img/home_bg_large.jpg'); }
  @includ breakpoint(xlarge) { background-image: url('../img/home_bg_xlarge.jpg'); }
  @include breakpoint(xxlarge) { background-image: url('../img/home_bg_xxlarge.jpg'); }
}
.about-us { 
  background-image: url('../img/about_us_bg_small.jpg'); 
  @include breakpoint(medium){ background-image: url('../img/about_us_bg_medium.jpg'); }
  @include breakpoint(large){ background-image: url('../img/about_us_bg_large.jpg'); }
  @include breakpoint(xlarge){ background-image: url('../img/about_us_bg_xlarge.jpg'); }
  @include breakpoint(xxlarge){ background-image: url('../img/about_us_bg_xxlarge.jpg'); }
}

 

html

<div class="hero home">
<!-- background to go here -->
</div>

 

 

 

retinamedia queriesscss mixin

I am trying to display a different image depending on the screen size. In addition, I would like to provide a different background image for retina displays or those which a higher pixel ratio. Here is the relevant code from scss and the page.

Is there a way to combine the breakpoints for retina and one of the size breakpoints together?

@include breakpoint() allows you to specify one but not both.

scss

.hero {
  height: 240px;
  @include breakpoint(medium) { height: 360px; }
  @include breakpoint(large) { height: 480px; }
  @include breakpoint(xlarge) { height: 540px; }
  @include breakpoint(xxlarge) { height: 640px; }
}

.home, .about-us, .careers, .contracts, .what-we-do {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.home {
  background-image: url('../img/home_bg_small.jpg');
  @include breakpoint(medium) { background-image: url('../img/home_bg_medium.jpg'); }
  @include breakpoint(large) { background-image: url('../img/home_bg_large.jpg'); }
  @includ breakpoint(xlarge) { background-image: url('../img/home_bg_xlarge.jpg'); }
  @include breakpoint(xxlarge) { background-image: url('../img/home_bg_xxlarge.jpg'); }
}
.about-us { 
  background-image: url('../img/about_us_bg_small.jpg'); 
  @include breakpoint(medium){ background-image: url('../img/about_us_bg_medium.jpg'); }
  @include breakpoint(large){ background-image: url('../img/about_us_bg_large.jpg'); }
  @include breakpoint(xlarge){ background-image: url('../img/about_us_bg_xlarge.jpg'); }
  @include breakpoint(xxlarge){ background-image: url('../img/about_us_bg_xxlarge.jpg'); }
}

 

html

<div class="hero home">
<!-- background to go here -->
</div>

 

 

 

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

Rafi Benkual almost 3 years ago

Typically retina images can be made 2x the size and they will still fit nicely in a column and be scaled down with breakpoints.

There's a good explanation of it here: https://responsivedesign.is/strategy/retina-display-and-pixel-density

There is a way to target pixel ratio: https://gist.github.com/jamiehs/3834598

Rafi Benkual almost 3 years ago

There is a way to combine them in the mixin 

@media screen and #{breakpoint(medium)} and #{breakpoint(retina)} {
  // Medium to extra large styles
}

Joshua Scott almost 3 years ago

Rafi,

Thanks for the response. I think it would be a good addition to have a mixin that accepts both parameters. I can add in a media query for now but I like the suggestion. I wasn't sure if there was a more Zurb approved way to implement it but you have answered my question.

Joshua Scott almost 3 years ago

Rafi,

Thanks for the response. I think it would be a good addition to have a mixin that accepts both parameters. I can add in a media query for now but I like the suggestion. I wasn't sure if there was a more Zurb approved way to implement it but you have answered my question.

Rafi Benkual almost 3 years ago

 Does that mean that the above method didn't work for you?

 

Joshua Scott almost 3 years ago

Actually that does work. I just tested it. Thanks.