Large view.
Logical Breakpoints I never paid attention in maths class before dropping out of high school a long time ago, so I’ll stick to a very simple grid that even I understand. Smarter people could probably use these same ideas for more complex grid systems. This chapter is about defining breakpoints; what you do with them is entirely up to you. SMALL SCREENS I’ll start with the small screen. One theory of Oliver Reichenstein42, a theory I really like, is that font size doesn’t depend on screen size; it depends on the distance between our eyes and the device we’re using. We tend to hold our phones closer to our head than our laptops, so this might warrant smaller fonts. The other theory of Robert Bringhurst, as explained above, is that an ideal measure should probably not be smaller than 45 characters. In our case, where we use a 16-pixel Georgia as the default font size, this would result in a slightly smaller font size. Both theories are fine, and they both tell us to reduce the font size on small screens. So, all of the code we’d need for small screens is this: @media (max-width: 22em) { body { font-size: .9em; padding: 0 1.5em;
42. http://informationarchitects.net/blog/responsive-typography-the-basics/
27