You are developing an ASP.NET MVC web application for viewing a list of contacts. The application is designed for devices that support changes in orientation, such as tablets and smartphones. The application displays a grid of contact tiles in portrait mode. When the orientation changes to landscape, each tile in the grid expands to include each contact’s details. The HTML that creates the tiled interface resembles the following markup.
The CSS used to style the tiles in landscape mode is as follows.
If this CSS is omitted, the existing CSS displays the tiles in portrait mode. You need to update the landscape-mode CSS to apply only to screens with a width greater than or equal to 500 pixels.
Which code segment should you use?
A. @media screen and (width >= 500px) {
. . .
}
B. @media screen and (min-width: 500px) {
. . .
}
C. @media screen (min-width: 500px, max-width: 1000px) {
. . .
}
D. @media resolution (min-width: 500px) {
. . .
}
