HTML and CSS Reference
In-Depth Information
to RecipeFinder to make it viewable on any size monitor, device, or screen. We're also going
to change many of the pixel-based units in our existing CSS to use percentages instead.
Withthesenewstylesinplace,thelayoutwilladjustdependingonwhethertheuserisvisiting
the website on a desktop computer, a tablet (like the iPad), or a smartphone. In all cases,
those visiting RecipeFinder will have access to the exact same information, but with an ap-
propriate layout for each.
Before getting started, it's worth noting that we're going to run through all these changes and
additions pretty quickly. This isn't a book on RWD, so we don't have the space to consider
this topic in great detail. For a full discussion of RWD, check out
Jump Start Responsive Web
min- and max- Dimensions
There are four new CSS properties that we haven't discussed yet, and which often come in
handy in flexible, responsive layouts. They are
min-width
,
min-height
,
max-width
,
and
max-height
.
These work very similarly to the width and height properties except, instead of declaring the
width or height explicitly, they set boundaries for them. For example, the first thing we're go-
ing to change in our styles is the width value declared for the
.center-global
elements:
.center-global {
max-width: 1020px;
margin: 0 auto;
}
Now, the width of
.center-global
will still be 1020 pixels, but when the browser win-
dow or device size is smaller, it will shrink to fit. Thus, it doesn't have a set width; it can be
any width but it cannot be more than 1020 pixels.
The other
min-
and
max-
properties work similarly. We'll use a few others in this section,
and they'll often prove to be useful in responsive layouts.