By Marko Dugonjić CHAPTER 9Some users zoom into websites. To allow for proportional scaling with
zoomed-in text, we can use ems instead of pixels as proposed by Lyza Gard-
ner in her article “The EMs have it: Proportional Media Queries FTW!”^61. The ef-
fect takes place when text is zoomed in and the lower breakpoint condition
is met. For example, let’s say our ideal breakpoints for a project are at 600,
800 and 1,000 pixels. If we divide pixel values by the root font size, which
in this example will be 16px, the em-based query values would be 37.5, 50
and 62.5ems respectively.
@media only screen and (min-width: 37.5em) { } / 600px /
@media only screen and (min-width: 50em) { } / 800px /
@media only screen and (min-width: 62.5em) { } / 1000px /
Despite the fact they have changed the way we plan and build websites
from the ground up, media queries are still not the final solution. They
are perfect for introducing different layouts, but the content units should
behave in a certain way depending on their available space, not just going
by the overall screen size. One typical example is a data table that can be
easily turned into a definition list on a small, 300px wide screen, but at the
same time can’t be rearranged in the same manner when placed in a nar-
row, 300px-wide sidebar on a bigger screen. Can you see the problem here?
How can we query that?^62
Andy Hume came up with the concept of responsive containers^63 which
he elaborates on his blog, so I won’t go into the exact details here. For now,
rest assured that the problem was detected and some smart people are work-
ing on the solution. Fingers crossed it becomes part of the CSS standard.
61 http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
62 There’s a handful of jQuery plugins available, e.g. http://kumailht.com/responsive-elements/
63 http://blog.andyhume.net/responsive-containers/