Home > Developer > Web Develop
Tutorial will guide you through how to use "em" to create a basic elastic layout to learn how to calculate it? And how do you use "em" to elastically extend the layer? How do you extend text and images? Let's start with the "Em" line today with these questions.
What is elastic layout?
User's text size and flex layout
The user's browser default render text size is "16px", in other words, the Web page "body" text size in the user browser default rendering is "16px". Of course, if the user wishes he can change the font size setting, the user can change the default font size of the browser via UI controls.
Elastic design has a key place all elements in a Web page use the "Em" unit value. "Em" is a relative size, we can set 1em,0.5em,1.5em and so on, and "em" can also be assigned to three digits after the decimal point, such as "1.365em". And the meaning of "relative" is:
1. The relative calculation is bound to be a reference, then the relative refers to the font-size of the element parent element. For example, if you set the font size to "16px" in a <div>, at this point the <div> descendant element tutorial is going to inherit his font size unless you re-display the settings in its descendant elements. At this point, if you set the font size of its child elements to "0.75em", then the font size is calculated to be equivalent to "0.75 X 16px = 12px";
2. If the user changes the size of the text through the browser UI control, then our entire page will also be enlarged (or shrunk), so that the user changes the browser font will cause the entire page to crash (I think this is like everyone has encountered, do not believe you have to try your own projects, you will feel very scary).
You can look at this elastic layout sample. At this point you use the browser UI control to change the size of the text or direct "CTRL +" and "Ctrl-", you will find this elastic layout instance, in the browser to change the font size browse will make the corresponding zoom in and zoom out, and will not affect the layout of the entire page. Note: All HTML and CSS for this instance will be used in this tutorial.
For other examples of flexible layouts, you can browse Dan Cederholm's simplebites and change the size of the text.
After the experience, it is not felt flexible layout of the page, but also like the "PX" as accurate. So, as long as we have mastered the basic relationship between "font-size", "px" and "em", we can quickly use CSS to create precise layouts for people to eat.
CSS Elastigirl Introduction of EM
Elastigirl's "em" is extremely powerful and flexible, regardless of the font size, is 12px,16 or 60, and he can calculate its value.
EM is actually a kind of typesetting test unit, and his Origin there is a small story, about this little story I will not tell you, because everyone is not to listen to my story, I think big still like to know his CSS in those things.
In CSS, "em" is actually a vertical measurement. An em equals the vertical space required for the letters in any font, and has no relation to the horizontal space it occupies, so:
If the font size is 16px, then 1em=16px.
Entry
Before we begin to understand this "em" in CSS, we need to know his default font size under the browser. Just as we did before, in all modern browsers, the default font size is "16px". So the default settings under the browser will be:
1em = 16px
Therefore, when a CSS selector is written, the browser has a default font of "16px" size. The <body> in our web page inherits this "Font-size:16px", unless you explicitly set <body> 's "font-size" value in the CSS style to change its inherited value. In this way, "1em = 16px", "0.5em = 8px", "10em = 160px" And so on, we can also use "em" to specify the size of any element.
Set the body's font-size
Many predecessors have come to an experience in many years of practice, suggesting that we set the font size required for a body text in <body>, or set it to "10px", equivalent to ("0.625em or 62.5%"), so as to facilitate the calculation of its child elements. Both of these are desirable. But we all know that the default font for,<body> is "16px", and we are aware that we have changed his default values so that if the flex layout is not broken, it needs to be recalculated and re-adjusted. So the perfect setting is:
body {font-size:1em;}
But under the IE that no one loves, "em" will have a problem to exist. Adjusting the font size will also break our elastic layout, but fortunately there is a way to solve it:
HTML {font-size:100%;}
Formula Conversion--pxtoem
If you are the first to create a flexible layout, it is best to prepare a calculator around, because we start with a lot of calculations, with his rest assured.
Pixels are too close for us, so we'll start with that too. You first need to calculate the ratio between 1px and EM, and then you know the PX value we need. From the previous introduction, we all know that 1em is always equal to the font size of the parent element, so we can completely calculate by the following work:
1÷ the Font-sizex of the parent element needs to convert the pixel value = em value
You can refer to the following conversion table (the body font is 16PX value)
Next we'll look at a very simple example of "using CSS's em to make a 960px-width elastic Layout"
HTML Markup
<body><div id= "Container" >...</div></body> |
Convert 960px to EM
1÷16pxx960px = 60em
The precondition of this calculated value is the "font-size:16px" of <body>.
CSS Code
Through the above example, I think we can more like the understanding of the image, because there are examples can be consulted, in fact, we can convert the above calculation formula, will be more convenient for your calculation:
The pixel value that needs to be converted ÷ The parent element's Font-size = em value
Then the example above us "960px" can be converted to "em" value
960PX÷16PX = 60em
Together we have witnessed the "px" Conversion to "em" calculation, and then we move together to see the production of the above shown elastic layout sample. Below we mainly together to realize him step-by-step.
Build a resilient container
To create a center effect like the elastic layout sample, we first need to create an HTML structure where I create a <div> named "Wrap"
We want this container to be a "740px" wide, suitable for an example of a "800pxx600px" display. So how much "em" is "740px"? That's what we need to be concerned about, let's see it together:
1, the "740px" into "em" set to our Container "div#wrap": we all know that "div#wrap" parent element <body> set the font to "16px", then in the absence of additional display settings, his child elements <div id= "Wrap" > Will inherit the "Font-size" value so that we can easily get: "Relationship between 1px and 1em"
1em = 16px is 1px = 1÷16 = 0.0625em
In this way, our "740px" can be easily converted to "em" 0.0625emx740 = 46.25em
Of course, you can also follow the calculation formula we listed earlier to convert, so you have a more conceptual, and not easy to mistake:
1÷16x740 = 46.25em (1÷ parent element's Font-sizex need to convert the pixel value = em value)
In this way, you can use the above formula to calculate any width or height of the "em" value you need, you just need to know "1px equals to how much Em", and the other is the "PX" value you want to convert, with these parameters you can get the "em" value you want.
2, create CSS style: Now we can give "div#wrap" write style, elastic layout sample Very obviously tell us, to "Div#wrap" set a width of "740px" center, with up and down "margin" for "24px", and with "1px" border effect , we first calculate the corresponding "em value" according to the above formula, and then write to the CSS style:
HTML {font-size:100%;} body {font-size:1em;} #wrap {width:46.25em;/*740px÷16 = 46.25em */margin:1.5em auto;/*24px÷16 = 1.5em*/border:0.0625em solid #ccc;/*1px÷ + = 0.0625em*/} |
Now it's easy to create an elastic container with content: Elastic layout Sample.
Text style with EM
First we insert a
<div id= "wrap" > |
In the elastic layout sample example, we use "18px" in the title, while the paragraph is set to "12px" and its row height is "18px". 18PX will be an important value for our resilient layouts, which can be used to vary proportionally. (For a description of the title and paragraph, you can click on Richard Rutter's basic leading and vertical rhythm and chapter on vertical motion).
According to CSS inheritance, we do not explicitly set the font size in the "div#wrap" content container, so that the entire "Div#wrap" will inherit the font of its parent element "body"--"16px".
1. Set the paragraph style:--"12px" Font, "18px" line height and margin value
From CSS inheritance, we can tell that all of our paragraphs inherit the "font-size:16px" of their parent element "Div#wrap". At the same time we learned from the previous introduction 1px = 1÷16 = 0.0625em, so we can easily know "12px" equals how many "em"
0.0625emx12 = 0.750em
So we can set the style for paragraph p:
p {font-size:0.75em;/*0.0625emx12 = 0.750em */}
To calculate the line height required for the paragraph and "margin" to "18px" to meet the basic leading that Richard Rutter said, we need to calculate as follows:
18÷12 = 1.5em
Use the desired row height value "18px" to divide it directly by "font size 12px", so that the "line-height" value of the paragraph "P" is obtained. In this example, the line is equal to the "1.5" of the font, and then we add the "line-height" and "margin" styles to the paragraph "p".
p{font-size:0.75em;/*0.625emx12 = 0.750em */line-height:1.5em;/*18px (line-height) ÷12 (font-size) = 1.5em */margin:1. 5em;/*18px (margin) ÷12 (font-size) = 1.5em */} |
2. Set a 18px font size for the title
The title "H1" and the paragraph "p" the same principle, he also inherited his parent element "Div#wrap" of "16px" of "font-size", so we also in the same way can be counted as his "em"
0.0625emx18 = 1.125em
We can write the resulting value in a CSS stylesheet.
h1 {font-size:1.125em;/*0.625emx18 = 1.125em*/} |
Also in order to preserve Richard Rutter's vertical rhythm, we also set the title "H1" to "line-height" and "margin" to "18px", using the method described earlier. It is easy to get their "em" value to "1em":
h1 {font-size:1.125em;/*0.625emx18 = 1.125em*/line-height:1em;/*18px (line-height) ÷18px (font-size) = 1em */margin: 1em; /*18px (margin) ÷18px (font-size) = 1em */} |
Set picture size--Using EM
To make the elastic layout example, we also need to insert an image into the HTML:
<body><div id= "wrap" > |
Our picture has a width of "90px" and a "18px" setting for the right margin and bottom margin, and also for left float. Let's take a look at how it works in several styles:
From the HTML structure, we know very well that the picture is a sub-element of the paragraph "P", and by the previous introduction, you know that the "font-size" value of the paragraph "p" is defined as "12px", so when we calculate the property value of the picture, we cannot press "1px = 0.0625em" or " 1em=16px "To calculate, we need to use the oldest formula to calculate:
1÷ the Font-sizex of the parent element needs to convert the pixel value = em value
So, by the formula shown above, we can calculate the size of the image:
1÷12x90 = 7.5em
Now you can write the calculated values to the style:
P img {width:7.5em;/*1÷12 (Font-size of Parent Element) x90px (width of picture) = 7.5em */height:7.5em;/*1÷12 (Font-size of Parent Element) x90px (height of picture) = 7.5em */} |
We know in the passage that "18px" is just "1em", and now we also use it in the style of the image:
This allows us to make a similar effect to the elastic layout example. It is hoped that such an example will help you understand how to use "em" to create a flexible layout method. Of course, you may also be worried about using "em" to make a flexible layout, not as "px" as accurate, if you really understand this tutorial, I think you will not have this idea.
Summary of formulas for elastic layouts
Finally, I think you and I will have the same idea, that is, the relevant parameter is how the "px" value is successful and correctly converted to "em" value, through the above study, I finally summed up the formula:
When the element itself does not have a font size set, the width, height, line-height, margin, padding, border equivalent conversions of the elements are converted as follows:
1÷ the Font-sizex of the parent element needs to convert the pixel value = em value
Let's look at an example:
<body><div id= "wrapper" >test</div></body> |
We are in the body default font size of "16px", at this time need to "div#wrapper" the relevant parameter value is:
#wrapper {width:200px;height:100px;border:5px solid red;margin:15px;padding:10px;line-height:18px;} |
Then we will convert the parameters according to the formula above:
#wrapper {width:12.5em;/*1÷16x200 = 12.5em value */height:6.25em;/*1÷16x100 = 6.25em value */border:0.3125em solid red;/*1 ÷16x5 = 0.3125em Value */margin:0.9375em;/*1÷16x15 = 0.9375em Value */padding:0.625em;/*1÷16x10 = 0.625em value */line-height: 1.125em;/*1÷16x18 = 1.125em value */} |
Let's take a look at the calculated values:
Next I need everyone to look at an effect, this is very important yo, carefully look, on the same parameters on the basis of a small element itself set the font size: 14px;, you can say very simple ah, according to the previous formula calculated to add is, then I now according to everyone said the calculation plus:
We'll look at the calculated layout value under Firebug.
In order to better illustrate the problem, I put the element itself is not set font size and the element itself set the font size, both in Firebug calculated values:
The main purpose of my truncation of this diagram is to illustrate the question that if the element itself is set to a font size, its calculation formula is not what is said earlier, we need to make a change:
1, the font formula is still
1÷ the Font-sizex of the parent element needs to convert the pixel value = em value
2, other properties of the calculation formula needs to be replaced by
The 1÷ element's Font-sizex need to convert the pixel value = em value
So we're going to calculate this once:
#wrapper {font-size:0.875em;/*1÷16x14= 0.875em value */width:14.2857em;/*1÷14x200 = 14.2857em value */height:7.1429em;/*1÷ 14x100 = 7.1429em value */border:0.357em Solid red;/*1÷14x5 = 0.357em Value */margin:1.071em;/*1÷14x15 = 1.071em value */paddin g:0.714em;/*1÷14x10 = 0.714em Value */line-height:1.2857em;/*1÷14x18 = 1.2857em value */} |
We're looking at a calculated value:
Summarize
Long introduction of a large pile, the only thing to tell you is the following points
1, the browser's default font size is 16px
2, if the element itself does not set the font size, then all the property values on the element itself such as "boder, width, height, padding, margin, line-height" equivalent, we can be calculated according to the following formula
1÷ the Font-sizex of the parent element needs to convert the pixel value = em value
3, this one must slowly understand, otherwise it is easy to mix with the 2nd. If the element sets the font size, the conversion of the font size is still calculated as the second formula, which is the following:
1÷ the Font-sizex of the parent element needs to convert the pixel value = em value
Then the element sets the font size, and other properties of this element, such as "border, width, height, padding, margin, line-height", are calculated according to the following formula:
The Font-sizex of the 1÷ element itself needs to convert the pixel value = em value
In this way, I do not know that you understand the whole understanding of no, if not the whole understanding, you can go back to see an example above.
Explanation and analysis of EM usage in CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
