Resizing Responsive Designs with CSS REMs

Photo: Ariel Zambelich/Wired.com

Building responsive websites means that your design has to adapt to different screen sizes. We?ve covered a number of ways to do that in the past, including working with percentage widths, em-based type and other flexible techniques of responsive design.

There?s another way to achieve flexibility that doesn?t involve keeping track of ems or percentages ? the new CSS REM unit. REMs are just like ems ? REM stands for Root Em ? but instead of being relative to the parent element like Ems, REMs are relative to the document root?s font size. Most of the time that means the html element.

We?ve previously looked at REMs as a way to achieve fluid typography, but REMs can help with more than just type sizing.

Mobify?s Roman Rudenko has an article on CSS-Tricks that shows how to use REM units to scale specific page elements while leaving others unaffected. Rudenko even shows how you can use REM units as a replacement for the very powerful, but not very well supported, viewport width unit.

For those wondering why you might want to resize some elements and not others, here?s Rudenko?s use case:

This style of sizing can be useful for user-driven customization, or to adapt layouts for cases that require secondary elements to be more touchable (tablet) or visible (TV). Without REM, every adjustable element would have to be resized separately.

This technique can be applied to whole pages as well. For example, if your type is all sized in REMs and you want it to be a bit larger as screen sizes get bigger, all you need to do is adjust the font size on the html element with each media query and all your REM-sized type will get bigger based on that single line of code.

For more on REMs and what you can do with them be sure to check out Rudenko?s post and our earlier write up.

crawled from : Webmonkey