HTML and CSS Reference
In-Depth Information
Figure 10-35. The navigation resizes to fit the viewport
This is a rather simplistic demonstration of what media queries can do. The rising ubiquity of smartphones
and tablets means more people are accessing the Web on small-screen devices every day. With media
queries, fluid images, and a flexible layout, you can construct a website that responds and adapts to the
viewport, shifting and rearranging elements to optimize the experience for the full spectrum of web-capable
Figure 10-36 shows the website for dConstruct 2012, an annual technology and culture conference in
Brighton, England ( ). Th e layout shifts and adjusts to different viewport
sizes from mammoth, high-definition desktop monitors to pocket-sized smartphones. This is a shining
example of responsive design using a flexible layout, fluid images, and CSS3 media queries.
Search WWH ::

Custom Search