O'Reilly logo

Responsive Web Design with HTML5 and CSS3 by Ben Frain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Amending a design from fixed to proportional layout

Typically, for the foreseeable future, any design composite you receive or create will have fixed dimensions. Currently we measure (in pixels) the element sizes, margins, and so on within the graphics files from Photoshop, Fireworks, and so on. We then punch these dimensions directly into our CSS. The same goes for text sizes. We click on a text element in our image editor of choice, note the font size, and then enter it (again, often measured in pixels) into the relevant CSS rule. So how do we convert our fixed dimensions into proportional ones?

A formula to remember

It's possible I'm coming off too much of an Ethan Marcotte fan boy, but at this point it's essential that I provide another large ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required