CSS Mastery摘要(7)--Responsive Web Design & CSS

As smartphone browsers appeared, there weren’t many sites optimized for screens of that size. As a
consequence, browsers on most mobiles (as well as tablets) are hard-wired to show a desktop-sized viewport
by default, allowing non-optimized sites to fit. Usually, they emulate a viewport width of somewhere around
1000 CSS pixels, effectively zooming out the page. We call this the default viewport . This is why we have to
jump through some hoops when we want responsive designs to display correctly.
As the default viewport is an emulated viewport size, it follows logically that there is a viewport
definition closer to the dimensions of the device itself. This is what we call the ideal viewport . The ideal
viewport varies depending on device, operating system, and browser, but usually ends up being around 300
to 500 CSS pixels in width for phones, and 800 to 1400 CSS pixels for tablets. In the iPhone 5 example from

earlier, this is where the 320-pixel width comes from.

Having set the scene by differentiating between the default viewport and the ideal viewport on phones and
tablets, we get to a common, more intuitive definition for both with regard to how viewports actually work.
We call the basic rectangle inside of which a web page is shown the visual viewport. This means the browser
window, minus any buttons, toolbars, scrollbars, etc. (known as “browser chrome”) that surround the actual
web content.
As we zoom in on a page, some parts of the layout end up outside of the visual viewport, as shown
in Figure 8-9. The rectangle we are looking at now is still the visual viewport, but we now refer to the
hypothetical rectangle constraining the layout of the whole pageas the layout viewport. This split between
visual viewport and layout viewport works conceptually in the same way on desktop browsers as on phones
and tablets.
As you can see, there is more than meets the eye when it comes to the viewport. The bottom line is that
in responsive web design, we aim to design our pages to adapt to the ideal viewportof each device. Desktop
browsers don’t need any special treatment since the ideal viewport is equal to the default viewport there. But
on phones and tablets, we need to opt out of the fake measurement of the default viewport and make it equal
to the ideal viewport. This is done with a small piece of HTML known as the meta viewport tag.

We can make devices that have a different default viewport use the ideal viewport by adding a small tag
inside the head element of our pages. It looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser that we would like to use the ideal measurements of the device (thedevicewidth) as the basis for the viewport width. There’s also another preference set here: theinitial-scale=1
bit. That part sets the zoom level to match the ideal viewport, which also helps to prevent some odd scaling
behavior in iOS. Most devices will assume device-widthwhen a zoom level is set, but both are needed for
full compatibility across devices and operating systems.
Setting initial-scale to a value higher than1 means you are zooming the layout further, and by doing
so you’re decreasing the size of the layout viewport, since fewer pixels fit. Conversely, setting the value lower
zooms out and sets the layout viewport to be larger in terms of CSS pixels.
You can also set width inside the viewport to a pixel measurement instead of thedevice-width keyword,
effectively locking down the layout viewport to a value of your choice. If you combine it with aninitialscale value , mobile browsers across the board will pick thelarger of the two.

In this chapter, we have looked at how to structure responsive CSS—for layout, for images, and for
typography. We took a deep dive into the technical foundations of how responsive design works, deciphering
various viewports and how to make them behave the way you want when using CSS.
We also looked at a range of examples on how to use new specifications like flexbox and Grid Layout
to adjust responsive layouts, with or without media queries. We have seen how to implement responsive
images using new additions to CSS as well as the new standards for responsive content images. Finally, we
examined some considerations for typography on different form factors.