[Mobile Web] LEVEL 5 RESPONSIVE MEDIA -- Ex

MAX-WIDTH

 

Set the max-width of images to 100%.

img{
    max-width: 100%;
}

 

MAX-WIDTH ON ASSETS

 

Set the max-width of images, embeds, objects, and videos to 100%.

img,
embed,
object,
video{
  max-width: 100%;
  }

 

MEDIA QUERY #1

 

Write a media query to target devices with a at least a 1.5 device-pixel-ratio, using the screen media type. Make sure to target the -webkit proprietary extension, as well.

@media 
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
  
  }

 

MEDIA QUERY #2

 

Assuming we have a 75px by 75px logo.png image and a high-resolutionlogo@2x.png image, include the high-resolution image within the media query you just wrote as a background-image on the .logo. Don't forget to set the background-size as well.

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  .logo {
    background-image: url('logo@2x.png');
    -webkit-background-size: 75px 75px;
    background-size: 75px 75px;
  }
}

 

PICTURE ELEMENT

 

Using the Scott Jehl PictureFill method, create a <picture> element with "Our Camp Site" as the alt text. Also add camp-site.jpeg as the smallest source size, with no @media qualifier.

<picture alt="Our Camp Site">
  <source src="camp-site.jpeg" />
</picture>

 

MEDIA SPECIFIC IMAGES

 

Now, add camp-site-lrg.jpeg as the second source, with an @media qualifier for devices with a width of at least 900px.

<picture alt="Our Camp Site">
  <source src="camp-site.jpeg" />
  <source src="camp-site-lrg.jpeg" media="(min-width:900px)"/>
</picture>

 

NOSCRIPT FALLBACK

 

Finally, add a <noscript> fallback block within the <picture> element to include a normal img tag, with the camp-site.jpeg and "Our Camp Site" alt text.

<picture alt="Our Camp Site">
  <source src="camp-site.jpeg" />
  <source src="camp-site-lrg.jpeg" media="(min-width: 900px)" />
  <noscript>
    <img src="camp-site.jpeg" alt="Our Camp Site" />
  </noscript>
</picture>