7 CSS basics on how to responsive web design.

1. Media query’s
CSS Media queries are foundation of responsive design. They detect whether an argument has been met, and applying the declared rules within. In this case, if the viewport width is below 320px, a padding of 5px will get set on the body element.

body{ padding : 30px; }

/* ------ Ipads ------ */
@media all and ( max-width: 1024px ){

    body{ padding : 22px; }

}
/* ------ Smartphone ( landscape ) ------ */
@media all and ( max-width: 480px ){

    body{ padding : 10px; }

}
/* ------ Smartphone ( portrait ) ------ */
@media all and ( max-width: 320px ){

    body{ padding : 5px; }

}

You are not limited to the above arguments, but you get the idea of the power behind media queries.

Multiple media query’s like above, allows for greater control when targeting different device shapes and sizes, and can often be seen on websites that ”pop” into a new layout when resizing your browser. i.e. Mashable.

Note. CSS media queries don’t work on IE8 or below. But who cares, this was invented for devices that run on normal modern browsers.

2. Max-width property

Max-width is excellent, giving you more flexibility to your elements. For example the #wrapper element will not get any larger than 550px but will squish conveniently when its parent element gets smaller than 550px. You can add this property to any element on your HTML. Although be careful, if a width property has been set with a px value on the element, in this case #wrapper.

#wrapper {
    max-width : 550px;
    width : 400px;
}

Your browser will use the property with lowest value, in this case the width and give undesired results. To avoid this altogether set “width” to “auto” or a percentage value. Learn more about max-width here.

3. Percentages

Setting percentages for width and font size values is another great way to to have your website fold in gracefully. This is probably the most basic, responsive property of them all, but it works. Don’t forget you can apply this to your margins, paddings, borders etc. By doing this you avoid huge gaps when the text resizes down. Yay.

#wrapper { width : 80%;}

4. Images

Setting the height value to auto on images will tell the browser to automatically adjust the height according the aspect ratio of image when the image width changes.

For example, if the image above was 180px by 100px and the browser shrinks half the size, the final rendered image would now be 90px by 50px respectively.

Note. Don’t forget you can set a min-width property in combination with max-width, to give your images further control.

img {
    max-width : 100%;
    min-width : 120px;
    height : auto;
}

5. EM Units

Em’s are getting more attention on the awakening of responsive design, as they provide more flexible font control than the standard px unit. Em’s are relative to itsparent font-size, which allows for a more optimal stylesheet’ing, enabling you to change the entire document font-size by altering the root font-size. For example.

html    { font-size : 1em; }
h1      { font-size : 3em; }
span    { font-size : 0.5em; }

<h1><span>Gidday, I'll  be rendered at 1.5em.</span></h1>

Simply changing the html font-size to 2em, will cascade down and render that spantag in 3em. This is is great for inside media queries, as adjusting documents font size could never be easier! Another special power of em units is that text can be resized by zooming in IE 6-8, unlike px units cannot.

The EM difficulty.
1. It is known to you now, all font changes to a parent gets carried down the food chain, which can be annoying if not paying close attention. But from the perspective of clean, well composited css code, this can be a positive.
2. Nested list elements (li) double the em size. This can be sorted by setting the child list element to 1em. Like so.

li { font-size : 0.5em; } /* Size you decide */
li li, li li span { font-size : 1em; } /* default these elements to 1em */

Note. The above problems can be avoided by dipping into the wonderful world of rem’s.Which leads us too. .

 6. REM Units
Standing for “root-em”, this CSS3 unit is only relative to its root, meaning, the htmlelement. This avoids the two difficulties of em’s noted above, allowing for on the fly styling. For example, to make all your text smaller for mobile devices, you simply alter the css rule for html element.

html   { font-size : 1rem; }
h1     { font-size : 3rem; }
span   { font-size : 4rem; }

@media all and ( max-width: 480px ) {

    /* Half the size */
    html { font-size : 0.5rem; } 

}

<h1><span>Gidday, I'll be rendered at 2em on mobile devices.</span></h1>

7. Word Breaking

Does what it says and breaks up words and long URL text, etc. Wonderful :)

.h1 { word-wrap: break-word; }