From the course: Learning Responsive Media

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Using percentage-based values

Using percentage-based values

From the course: Learning Responsive Media

Start my 1-month free trial

Using percentage-based values

With responsive web design, we want to move away from using pixels to define, well, pretty much anything within a web page. We want to move away towards a more flexible, or fluid definition of our layouts. With relative units, we want to use values like M, or percentages. M units correspond to their current default font size in the user's browser. What that value is depends on each person's own browser setting, but normally out of the box, it's around 16 pixels. Let's work on adjusting a sample fixed width layout by translating that topography and layout to be more fluid. For the sake of demonstration purposes, our CSS is internal, meaning it resides in the same page as the HTML. Normally, we would link to an external CSS file, to not only this page, but to all the pages in a site to control the design. To start off, first in the body selector, set the font size property to 100%. This tells the browser to adjust the font sizes for the rest of the page, to the browser's own default…

Contents