Eric lippert - Amazon Web Services

computers, so we’ll call this the Tablet settings. But instead of
creating a third settings file, we’ll simply put the styles in the
media-browser-hd.css file. You may choose to do this if there are
common styles between the two form-factors, or you can go the
separate file per form-factor route. I am doing it for academic
reasons here.
Open the media-browser-hd.css and put in the following
@media only screen and (max-width: 1024px) {
}
This implies that the enclosing styles will be applicable to
browsers up to the width of 1024 pixels.
We adjust our style accordingly and the final set of styles are as
follows:
.imageColumns {
margin: 5px;
}
Set Margin to 5px instead of 10 in the desktop style.
.mediaImage {
max-width: 85%;
max-height: 150px;
}
Set max-height to 150 to match the height of the mediaDiv
.mediaDiv {
float: left;
width: 24%;
margin: 1px;
height: 150px;
border: 1px solid #7ba9ca;
display: table-cell;
vertical-align: middle;
text-align: center;
}
Set the Width to 24% giving us about 4 images per line and the
height to 150px so that landscaped images don’t look too odd.
h3 {
font-family: ‘Segoe UI’;
font-size: 0.7em;
}
Finally we update the font-site to be 0.7em
Updating the Media query for the
media-browser-hd.css
Now that we’ve two types of styles defined in one CSS file, we have
to ensure that the file is actually included for both types. We revisit
the Index.cshtml and update the condition to include
media-browser-hd.css as follows
Essentially instead of declaring a minimum width of 1025px, we’ve
reduced it to 481px so that the desktop style sheet (*-hd.css) is
included for any screen 481 pixels and above. Thanks to the
inner media query that has a max-width set to 1024, screen width
between 481 and 1024 are handled by the tablet styles, inside the
inner query.
We are all set, let’s run the application and search for images
posted by the Twitter user ‘fascinatingpics’. I have composited the
images from each form factor but we can see our media queries
are in action and each form-factor shows a layout that looks nice
and appropriate for the screen size.
DNcmagazine www.dotnetcurry.com | 55