Most of the designs are focused on the use of fixed values ​​in layout: the width and height of the blocks, font size. This allows the “not falling apart” imposed pattern when changing view scales and retaining the cross-browser compatibility property. However, there is one big drawback in this: with a large screen resolution, small fixed blocks are lost over a large area and go unnoticed. It does not even save the "rubber" layout, 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, browsing the rubber site is very inconvenient. And the desire to stay on this site disappears quickly. Is there a way to control the scale not only of the text, but of the entire site?

Task

The first thing that immediately comes to mind is scaling 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 should not be specified in px. When choosing the largest font, we will encounter such a problem that the site will simply “collapse” and will look completely unreadable.

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

Implementation

The peculiarity of the layout of the elastic template is that all values should be specified not in pixels (px) and not in percents, but in em .
Why is the use of percentages inefficient? Because the use of tenths and hundredths in the value is not perceived by all browsers. While for em values ​​you can specify 3 decimal places and each digit will be counted.
')
The use of em allows you to make any elements elastic and forget about the fact that somewhere our text can "leave" beyond the framework of a particular 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 should be noted that the creation of an elastic template will require a lot of calculations, namely, the transfer of the usual pixels to em. Therefore, it is worth armed with a calculator :)

By default, 1em is equal to the size of the font, which we indicate at 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 already probably know: 0.625em (62.5%) = 10px. This is a convenient starting point.

Register 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 we want to make elastic not only the font, but all the content, then we will have to abandon the appointment of the font size in the main structural blocks. The reason is that by assigning a font size to a block, we will have to recalculate its width in em using a different formula - not relative to the size of the parent value (10px), but on the font size of this block (12px). Therefore, inside the block we will use for example the element p.

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

Stretch Layout Example

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 exercising ullamco laboris nisi ut aliquip ex ea commodo consequat. Duel aute irure dolor in voluptate 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 exercising ullamco laboris nisi ut aliquip ex ea commodo consequat. Duel aute irure dolor in voluptate 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 the rules for the elements H1, P, IMG and block wrap. For the latter, set the width to 600px, having previously translated 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 title, set the 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 the em. But this is not a problem when the transformation formula is so simple. Assign the img element to the following rule:

img {
width: 8.333em; /* 100px/12 =8.33em 12 – p*/
height: 8.333em;
margin:0 0.833em 0.833em 0; /* 10px/12 =0.833em*/
}

See an example

Results

The example shows 2 blocks. The bottom of them, an example of the usual layout in px. However, you will see the difference only in IE and FireFox, since Opera will display the same zoom for both layout examples.

The largest font


The 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 entire block, thereby we created something similar to the scaling functions in Opera and IE7. So, now you can easily create a completely elastic template for a site that will not depend on fixed values. That will allow us to manage the scale not only of the text, but of the site as a whole both in IE and in 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