REM refers to the font size of the root element (root element,html), from the remote IE6 to Chrome they are all about, the root element of the default font-size is 16px.
What about the compatibility of such a new unit?
The mainstream versions of Ie9+,firefox, Chrome, Safari, and Opera are all supported, and I can use REM with the audacity.
The calculation of EM is based on the parent element, which brings great inconvenience to our calculation in actual use. Calculation is not convenient. So the appearance of REM no longer has to worry about the font-size of the parent element, because it is always based on the root element (HTML).
For example:
html{
font-size:62.5%; 10÷16=62.5%
}
body{
font-size:12px;
Font-size:1.2rem; 12÷10=1.2
}
p{
font-size:14px;
Font-size:1.4rem;
}
To be compatible with browsers that do not support REM, we need to write the corresponding PX value in front of REM so that unsupported browsers can degrade gracefully.
However, this writing font does not adapt to the size of the screen.
There are two ways to implement font adaptation:
1. Media Enquiry
HTML {
font-size:62.5%;
}
@media only screen and (min-width:481px) {
HTML {
Font-size:94%!important;
}
}
@media only screen and (min-width:561px) {
HTML {
Font-size:109%!important;
}
}
@media only screen and (min-width:641px) {
HTML {
Font-size:125%!important;
}
}
body{
font-size:12px;
Font-size:1.2rem; 12÷10=1.2
}
p{
font-size:14px;
Font-size:1.4rem;
}
<div>
<p> this effect on the designer's requirements is also very strict,</p>
For example, you need to specify a specification for the width of the design,
This is done to enable high-definition display on the mobile side. I have to say it's a very good thing.
</div>
My page is set up with the code above to control the font size display under different devices to make it adaptive.
2, through the JS to dynamically calculate the root element of the font-size, the advantage is that all device resolution can be compatible with
Link: JS to dynamically compute the font-size of the root element
3. There is a solution to the solution, using the viewport method.
%VW =%viewport Width
We use%VW to define the font size, that is to say, a percentage of the screen width to define the sizes. For example:
H1 {
FONT-SIZE:2.5VW;
}
This way, regardless of how the screen width changes, the H1 font size remains at 2.5% of the viewport width.
Considering the development of a future responsive design, if you want, the height of the browser can also be adjusted based on the percentage value. However, using a percentage-based value is not always the best way to define the size of the browser window, such as the font size does not change as you change the window, and now the new unit introduced by CSS3 explicitly solves the problem.
View Demo
CSS3 introduced "VW" and "VH" based on width/height relative to window size, "VW" = "View width", "vh" = "View height"; The above what we call Windows units allows us to be closer to the browser window to define size. Refer to the demo case against the following four container CSS styles:
. demo {width:100vw; font-size:10vw;}. demo2 {width:80vw; font-size:8vw;}. Demo3 {width:50vw; font-size:5vw;}. Demo4 {width:10vw; height:50vh;}
You can shrink the demo window to see changes in different big kids. Currently this CSS3 app supports all major browsers, ie must be over 10.
Set REM to margin padding
The above shows how to get the value of the percent of HTML font-site at different resolutions by calculating it. Actual development If the designer is designed according to the width of 640, we will follow the largest 640 to cut the chart, when we cut the chart if we want to set the margin how to banner, the value of the design chart is 10px spacing, we calculate by 640 ratio:
Margin-top:.5rem;
Padding-top:1rem
Above is the design diagram on the spacing 10px and 20px calculation into Rem method, we can and so on, if your design is 640 design can use the above method, anyway, each time with the maximum value to calculate it.
Set REM to height width
The actual development of the most often set the estimate is the height width value, in order to achieve the length of each device corresponding, many developers will use a percentage to do, this is no problem, but in fact, many scenes with REM than the percentage more flexible, in my actual development, Generally I only in the large div layout with the percentage, the element's setting generally uses REM to come. For example:
height:100px;
width:50px;
Set REM for border
In fact, even border we can do with REM, but it seems that the Android phone to border with REM units have a small part of the unsupported, in my development test found that the high version of the Android browser support, but the lower version of many are not supported, specifically should not use to see your own situation.
Border:.2rem solid #cccccc;
Summarize
The use of REM actually I may be just summed up some of the more commonly used properties, in fact, his scope is certainly not so much, the actual project development I believe that everyone in the use of his process will find a lot of surprises, very hope that you leave a message to discuss the content of this chapter. What's the problem I will be the first time feedback.
