CHAPTER 18. RESPONSIVE WEB DESIGN (RWD) 189
Required Answer:screen, print
Media types include media=all, media=screen, media=print, media=tv, and
apparently even media=3d-glasses. But the two main media types are screen
and print.
CSS lets us specify “breakpoints” where we change over to different styling.
In the list above, the breakpoints are at 400px, 800px, and 2000px.
Following are some current display sizes, just so you can get a feeling for
the variety of what is out there. Be impressed. Then read the section on
breakpoints below.
Smart Phone Viewport Sizes:213x320 320x480 320x533 320x568 320x569
360x640 375x667 384x640 400x640 414x736 424x753 480x854 540x960 720x1280
Tablet Viewport Sizes: 960x600 966x604 1024x600 1024x768 1280x800
1920x1200 2560x1600
Notebook and Laptop Screen Sizes:1280x800 1280x950 1440x900
CSS provides the capability to specify your styling based on media at-
tributes. A very popular attribute is min-width. This lets you revise your
styling if the screen is at least a certain number of pixels wide.
Exam Question 321(p.355): List the four most important media query
viewport attributes.
Required Answer:min-width, max-width, min-height, max-height
You should specify your styling for a tiny device first, and then use successive
media queries to handle larger and larger devices. Each larger size can be
triggered by using the min-width attribute. That way, if a small device does
not understand media queries, it gets the small styles.
Exam Question 322(p.355): List the two media query orientations.
Required Answer:portrait, landscape
orientation=portrait applies if the viewport is taller than it is wide. orien-
tation=landscape applies if the viewport is wider than it is tall. You can
use these to adjust your styling depending on how the device is being held.
18.4 Visual Breakpoints
As you work your way up through a variety of screen sizes, there are points
where it makes sense to rearrange your content to take advantage of the