Tags

, , , , , , , , ,

These days …

Almost every single website has a common requirement of .. being:

“Responsive “

And when you’re creating responsive front end .. try to use a em for container width for example:

If the container width is 960px (960grid) and the default font size is: 12px (we’re using custom font size in this example), then the primary container width will be: 80em.

The concept is grid size divided by default font size = container size.

But before we get to that .. default browser font size, use the following code in the style sheet.

body {
    font: normal 100% Helvetica, Arial, sans-serif;
}

As you can see, the code above uses some default fonts .. Nothing fancy and with a font-size of 100%, all the elements (div/paragraph etc) in our page are sized relative to the browser’s default type size, which in most cases is 16px and this is possible … thanks to the browser’s default style sheet.
responsive-container

also for responsive coding .. one of the most important thing is .. images .. to make them responsive .. in general you need this simple code in the style sheet

img {max-width: 100%}

Now about margin, to make function properly with the responsive layout of the rest of the website, what we need to do is ..

First find out the necessary margin in pixels(px) and them divide it with the container width(px) .. for example if the margin left is 30px and the container width is 960px then the result will be  30 divided by 960 = 3.125

so the CSS properties will be as following:

#name-of-container{margin: 0 0 0 3.125%;}

To use responsive font size instead of the traditional pixel based font size, what we need to do is ..

For example we want a certain paragraph to have 20px font size, what we’ll do is .. divide the target font size (24px) with the font-size of its container (12px – as its inherited from body assuming the body has a 12px font size defined.):

20px (target font size) divided by 12px (font-size from its parent container) = 1.666666666666667 .. is the result

so the font size will be 1.666666666666667em

and the CSS properties:

#paragraph-container-name{
    font-size: 1.666666666666667em;
}