Crafting A Basic Responsive Page

One of the tenents of responsive design is that you can now create different layouts for your site depending to how wide the browser is, dynamically changing the appearance of your pages as the browser is resized.

Let’s say we have a site for the fictional company “Ray’s Flowers”. Most pages in the site feature three div elements (#col1, #col2, and #col3) presented side-by-side for most desktop screens using display: table-cell

This design is fluid, so the columns of text become difficult to read when the browser is less than 1000 pixels wide. The changes in appearance between “wider than 1000px” and “less than 1000px” are minimal, so rather than creating a separate style sheet, we could make the new styles part of our main CSS:

body { margin: 0; font-family: Cambria; } 

h1 { background: #000; margin-top: 0; }

div#col1, div#col2, div#col3 { display: table-cell; padding: 1em; padding-top: 0; }

/* standard CSS rules applicable to everything up to this point */

@media screen and (max-width: 1000px) {

div#col1, div#col2, div#col3 { display: table-row; }

}

Now if the browser is more than 1000px wide, the columns display vertically; less than 1000px, they are horizontal.

Returning to handheld devices, you can even switch the presentation of the page based on the orientation of the device (technically, this could also work on desktop monitors that can be rotated upright or horizontal, as this rule is also supported in the latest desktop versions of browsers);

@media screen and (orientation:portrait) {

 /* appearance rules effective during vertical orientation of the screen */

 }

@media screen and (orientation:landscape) {

 /* appearance rules for horizontal orientation of the screen */

 }

It should be noted that it is also possible to animate the transition between these @media query states (discussed in an upcoming article), or target page size for printing:

@media print and (width: 210mm) {

	/*rules for printing on an A4-size page */

}