Responsive Design Programming


Quick summary

  1. fluid grids
  2. Use percentages.  target / context = result
  3. media queries
  4. min and max widths
  5. fluid images:  img { max-width: 100%; height: auto}
  6. relative margin (%)
  7. relative font size (%)
  8. Overflow:hidden Trick, you can clear float with the overflow property
  9. Word-break, word-wrap property. You can force unbreaking text (eg. long URL text) to wrap instead of running in a single line.

Fluid Images

This will tell the browser that any images should only ever be as large as their pixel value, which will ensure that the image is never stretched or pixelated. However, if they’re nested inside a parent container that’s smaller than their pixel value, then the image should shrink.

At a certain point, any fluid grid layout will start to “break” and no longer look good.  Then you need to start using media queries.

Min & Max Width

Prevents the element from extending the boundary.

Max-Width Container

The example specifies that the container to display at 800px if possible, but it should not exceed 90% of the boundary width.

.container {
        width: 800px;
        max-width: 90%;
}

Responsive Image

You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto.

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

The above responsive image CSS works on IE7 and IE9, but doesn't work on IE8. To fix it, add width:auto. You may apply a conditional CSS specifically for IE8 or use the IE hack below:

@media \0screen {
 img {
         width: auto; /* for ie 8 */
 }
}

Min-Width

Min-width prevents an element (say, an input) from getting very small when scaling down.

Relative Sizing

Relative Margin

You can afford wider margins on a large display.  If you keep those margins fixed with a px setting, they look huge and shrink the content they surround as the cell gets smaller.  Use relative values (e.g. %) and the margins will scale appropriately.

Relative Font Size

With relative value (eg. em or %), the font size, line-height and margin spacing can be inherited. For example, I can change the font size on all descendant elements by simply changing the font-size on the parent element.

Relative Padding

The screenshot below shows it is better to use relative percentage padding (with %) as opposed to fixed pixel padding. The box on the left shows an unbalanced padding space if pixel padding was used. The box with percentage padding on the right shows that the content area is maximized.

relative padding

Overflow:hidden Trick

You can clear float with the overflow property. This trick is extremely useful. You can clear the float from the previous element and keep the content running within the container by applying overflow:hidden.

overflow: hidden

Word-break

You can force unbreaking text (eg. long URL text) to wrap instead of running in a single line using the word-wrap property.

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

break-word

Links

Tip


Links marked with arrow icons ( or ) will open in a new tab.

You will see this message only once.