Responsive Web Design
Screen Shots Portrait & Landscape Orientation
Tap a graphic to view the Web page online. Learn about responsive Web design below.
Hidden Object Game
About Responsive Web Design
This set of Web page screen shots display responsive Web design implemented with media queries. Media queries load style sheets based on screen dimensions and other criteria. Responsive Web design allows Web masters to prepare one page for display on a set of devices, including mobile phones and full computers.
Web designers can resize elements based on the percentage
of available display space, with or without media queries. For example the following
img tag displays an image at 50% of
the width of the containing block.
<img style="width:50%" src="graphic.png" alt="Graphic Displays One Half Width" />
Before responsive Web design, often two pages were created for each topic, one page for desktop computers and the other page for mobile devices. Responsive Web design saves time and money, while providing a wonderfully simple method to prepare beautiful Websites for almost every device.
See media queries in action.
Tap a screen shot above, to view the Web page online.
Rotate your mobile device or resize your Web browser to watch pages rearrange and scale
to fit nicely, regardless of screen dimensions.
Landscape screens display more horizontal than vertical area,
such as on a typical desktop computer monitor.
Portrait screens display more vertical than horizontal area, such as on
a smart phone when held upright.
Web Design Concepts
Read more Web design concepts.