Eric lippert - Amazon Web Services

- We take our basic css from above (and probably defined in
Index.cshtml) and put it in a style sheet in the Styles folder.
We call it media-browser-hd.css.
- Next we add a reference to it in our cshtml’s section
The imageColumns no longer has a margin as its set to 0 as
opposed to 10 for the desktop style sheet.
.mediaImage {
max-width: 85%;
max-height: 100px;
}
As we can see, the media attribute is providing a query that
implies when the width of the browser is 1025 pixels or more,
use the media-browser-hd.css style sheet.
So if we were to reduce the size of our browser to less than
1025 pixels, there would be no CSS applied again (because there
are no other style sheets defined for other resolutions).
For the Image itself, we’ve reduced the max-height to match the
height from the mediaDiv style.
h3 {
font-family: ‘Segoe UI’;
font-size: 0.6em;
}
Styling for Mobile Devices
Well let’s fix that for the Mobile browser first. We add another
style sheet in the Styles folder and call it
media-browser-mobile.css. We keep the names of the classes
same but slightly tweak the width and height of the mediaDiv
.mediaDiv {
float: left;
width: 156px;
margin: 1px;
height: 100px;
border: 1px solid #7ba9ca;
display: table-cell;
vertical-align: middle;
text-align: center;
}
Finally the heading size is reduced from 0.8em to 0.6em to
reduce the text size for the input box and button on top of the
page. The CSS is now all setup. We hook it up in the Index.cshtml
as follows:
Let’s refresh our mobile browser and check
As we can see above, we’ve reduced the height to 100px and
fixed the width to 156px. The exact number 156px comes from
the math (320/2) - 2 x (1 + 1)!
Now what’s that formula Well, width of a ‘popular smartphone’
is declared as 320 pixels (portrait). We want two images to fit in
those pixels. So we divide by 2 to get (320 /2 =) 160 pixels. We
have a margin of 1px and a border of 1 px. Left and right border
for two images = 2 x (1 + 1) = 4 pixels. 160 – 4 = 156px.
Okay, I went overboard there, but the fact you can target your
CSS for well-known sizes, is what I am implying here. Now let’s
look at the changes in each style for mobile.
.imageColumns {
margin: 0px;
}
Sweet! As we can see the image above, width is working and the
browser is adapting itself beautifully.
Handling a third form factor and embedding media
queries in existing CSS
So far we’ve seen two form-factors. But remember between 481
pixels and 1024 pixels of screen-width, we have no CSS styling
applied. So let’s fix that.
This screen size is now very common with Tablets and handheld
54 | DNCmagazine www.dotnetcurry.com