HTML and CSS Reference
In-Depth Information
Figure 6-3
The overflow of the Cool Shoes & Socks page when viewed in Google Chrome at a width of 500px.
Go ahead and fix that:
1.
In styles.css, underneath the
body
rule set, add the following rule set:
img {
max-width: 100%;
}
2.
Save styles.css.
This is a rule set very common to responsive design and doesn't just fix the showcase image, but makes all images
on the page scale based on the width of the element they are contained within.
With this rule set, the showcase image can now only be the same size as the
<div class=”showcase”>
ele-
ment it is contained within. Now, no matter what the width of the browser window, the image is fluid, just like the
rest of the page, as shown in Figure 6-4.
Adaptive Design
If
responsive design
is something you've heard of before, you may have heard about
adaptive design,
too. What's
the difference?
Where a responsive design uses a fluid layout and media queries to make a web page change its layout for every dif-
ferent width, an adaptive design uses a fixed layout and media queries to change the layout only when specific width
conditions are met. A responsive design changes its layout for every different pixel width, whereas an adaptive
design may change its layout several times: one for mobile, one for tablets, and one for desktop/laptops, for example.
