Most designs are focused on using fixed values ​​for layout: width and height of blocks, font size. This allows the layout to “not fall apart” when changing the viewing scale and preserve the cross-browser property. However, there is one big minus - with a large screen resolution, small fixed blocks are lost over a large area and go unnoticed. Here the "rubber" layout will not even save, because the site will look even more unreadable, for example on 19 '' monitors with a resolution greater than 1280 in width. For me, this is relevant, because on a 17 '' laptop with a resolution of 1400x800, viewing the “rubber” site is very inconvenient. And the desire to stay on such a site disappears quickly. Is there a way to control the scale of not only the text, but the entire site?

Task

The first thing that immediately comes to mind is the zoom control in the browser settings. Fortunately, most modern browsers support this feature, with the exception of IE6 and FireFox (surprisingly). They allow you to control only the scale of the text, while in IE6 the font size must be specified not in px. When choosing the largest font, we will encounter such a problem that the site will simply “fall apart” and look completely unreadable.

Thus, our task is to make elastic not only the text, but also the blocks containing it.

Implementation

The layout feature of the elastic template is that all values should be indicated not in pixels (px) and not as a percentage, but in em .
Why is using percentages inefficient? Because, the use of tenths and hundredths of a value is not perceived by all browsers. While for em values ​​you can specify 3 decimal places and each digit will be taken into account.

The use of em allows you to make any elements elastic and forget that somewhere our text can “leave” beyond the bounds of one or another block. Many of you have probably read articles on how to switch from px to em. But I think repetition will not hurt anyone :)

It is worth noting that creating an elastic template will require a lot of calculations, namely, the translation of the usual pixels into em. Therefore, it is worth arming yourself with a calculator :)

By default, 1em is equal to the font size that we specify for the body element. If the font size is not set, then most browsers automatically set the size to 16px, then 1em = 16px. From here:
0.5em =
8px 10em = 160px, etc.
And as many probably already know: 0.625em (62.5%) = 10px. This is a convenient reference point.

We write the rules:

html{ font-size:100%; } /*необходимо для IE*/
body{ background:#eee;
font-size: 0.625em;
font-family:Arial;
text-align:center}

Now 1em will be equal to 10px.
The formula for converting px to em will be very simple:

Where, X is the value in px to be converted, and Y is the corresponding value in em.

Because If we want to make elastic not only the font, but also the entire content, then we will have to abandon the font size assignment of the main structural blocks. The reason is that having assigned the font size to the block, we will have to recalculate its width in em according to a different formula - not from the size of the parent value (10px), but from the font size of this block (12px). Therefore, inside the block we will use for example the p element.

Now you can deal directly with the structure, for example, this:

Пример "эластичной" верстки

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

We need to write down the rules for the H1, P, IMG elements and the wrap block. For the latter, set the width to 600px, previously translating to em:
600px / 10 = 60em.

#wrap{
width: 60em;
margin: 1.5em auto; /* 15px/10 =1.5em*/
border: 0.1em solid #ccc; /* 1px/10 =0.1em*/
background: #fff;
text-align: left;
}

For the heading, assign a font size equivalent to 16px, and for paragraphs 12px

h1{
font-size: 1.6em; /* 16px/10 =1.6em*/
margin: 0.833em; /* 10px/16 =0.833em*/
font-weight: 300;
}

p{
font-size: 1.2em;
line-height: 1.333em; /* 16px/12 =1.33em*/
margin-bottom: 1.25em; /* 15px/12 =1.25em*/
}

Do not forget also that the dimensions of the pictures now also need to be specified in em. But this is not a problem when the transformation formula is so simple. Assign the following rules to the img element:

img {
width: 8.333em; /* 100px/12 =8.33em 12 – у блока p*/
height: 8.333em;
margin:0 0.833em 0.833em 0; /* 10px/12 =0.833em*/
}

View example

Summary

The example shows 2 blocks. The lower one is an example of the usual layout in px. However, you will only see the difference in IE and FireFox, as Opera will equally display the zoom for both layout examples.

Font scale is the largest.


Font scale is the smallest.

As you can see, the advantages of elastic layout are obvious. Now not only the text is scaled, but also the whole block, thereby we created something similar to the scaling function in Opera and IE7. So, now you can easily create a fully elastic template for the site, which will not depend on fixed values. That will allow us to control the scale of not only the text, but the site as a whole in IE and FireFox.

Of course, not everyone wants to sit with a calculator and spend time on calculations. But if the initial task requires it, then, I hope, my example will be useful to you.

via Jon Tan gerine