Question 27

70-486 Skills Measured >> 2.5 Plan an adaptive UI layout >>


You are developing an ASP.NET MVC web application for viewing a photo album. The application is designed for devices that support changes in orientation, such as tablets and smartphones.

The application displays a grid of photos in portrait mode. When the orientation changes to landscape, each tile in the grid expands to include a description. The HTML that creates the gallery interface resembles the following markup.

The CSS used to style the tiles in landscape mode is as follows.
<ul> class="gallery">
&img src="..."> <div>Descript</div>
The CSS used to style the tiles in portrait mode is as follows: > li {
} > li > div
If this CSS is omitted, the existing CSS displays the tiles in landscape mode. You need to update the portrait mode CSS to apply only to screens with a width less than 500 pixels.

Which code segment should you use?

  • A. @media resolution(max-width: 500px) { . . . }
  • B. @media screen(min-width: 0px, max-width: 500px) { . . . }
  • C. @media screen and (width <= 500px) { . . . }
  • D. @media screen and (max-width: 500px) { . . . }