What is rem in css

css rem is a css unit. The full English name of rem is "font size of the root element", which refers to the unit of font size relative to the root element; and em refers to the unit relative to the parent element. The unit for font size.

#The operating environment of this article: Windows 7 system, Dell G3 computer.

Recommendation: "css video tutorial"

rem is a low-key css unit that has begun to rise in the past year or two. Many students have commented on rem. Different, some are trying to use it, and some have abandoned it after encountering pitfalls during use. But my overall evaluation of rem is that it is definitely one of the most suitable candidates for making web apps.

What is rem?

rem (font size of the root element) refers to the unit of font size relative to the root element. Simply put, it is a relative unit. When you see rem, you will definitely think of the em unit. Em (font size of the element) refers to the unit of font size relative to the parent element. They are actually very similar, except that one calculation rule relies on the root element and the other relies on the parent element for calculation.

Why do web apps use rem?

Here I particularly emphasize that web apps and web pages cannot use rem. In fact, of course you can, but for compatibility reasons, using it under web app can better highlight the value and capabilities of this unit. Next Let’s take a look at how some current enterprise web apps implement screen adaptation.

1. Achieve powerful screen adaptation layout:

Recently, iPhone 6 has been released with two sizes of mobile phones, which has led to even more confusion in the types of mobile screens. Remember to do web work a year or two ago One way to adapt apps is to use 320 width as the standard. If the size exceeds 320, it will still be displayed in 320 specifications. This implementation method is represented by Taobao web app, but recently the mobile Taobao homepage has been revised and uses rem In this unit, the home page is still as confusing as before, with pages with fixed widths and pages with a fluid layout.

The commonly used unit we use when cutting page layout is px, which is an absolute unit. There are many methods for screen adaptation of web apps, such as: fluid layout, limited width, and so on. Do it through responsiveness, but these solutions are not the best solutions.

For example, the fluid layout solution has many disadvantages. Although it can adapt to various screens, the display effect is extremely poor because only a few sizes of mobile phones can display it perfectly. The effect that visual designers and interactions want most, but there are still many companies in the industry that use fluid layout to cut web apps. Take a look at some of the cases I collected below:

1.Amazon

2.Ctrip

3.Lanting

The above websites are all implemented using fluid layout technology. They define the width through percentages when laying out the page. However, the height is mostly fixed with px, so the display effect on a large-screen mobile phone will become that the width of some page elements is stretched very long, but the height is still the same as before, and the actual display is very uncoordinated. This is streaming. The most fatal shortcoming of the layout is that the effect seen on mobile phones of only a few sizes is often satisfactory. In fact, many visual designers should not be able to accept this effect because their design drawings are not visible on large-screen mobile phones. The effect is equivalent to being stretched horizontally.

Fluid layout is not the most ideal way to implement it. Through a large number of percentage layouts, many compatibility problems will often occur. There are also many restrictions on the design, because they need to be implemented at the beginning of the design. Considering the impact of fluid layout on elements, only horizontally stretched element layout can be designed, which has many limitations during design.

2. Fixed width method

Another method is to fix the page width. In the early days, some websites set the page width to 320, and left the excess part blank. This way, it looks good on the front end. Happily, the visual design no longer needs to be limited by the fluid layout, and the front-end does not need to engage in deceptive fluid layouts. However, there are some problems with this solution. For example, there are blank spaces on both sides on large-screen mobile phones. Another is that the page looks very small on large-screen mobile phones, and the operation buttons are also very small. The mobile Taobao homepage initially looked like this Made, but recently revised, using rem.

3. Responsive approach

Responsive approach is rarely used on mobile terminals for complex websites of large enterprises in China. The main reason is that the work is large. Maintenance is difficult, so generally small and medium-sized portals or blog sites will use the responsive method to directly go from web page to web app in one step, because this can save costs and no longer need to build a web app specifically for their own website. version of.

4. Set viewport for scaling

The homepage of Tmall's web app is made in this way. It is scaled based on the width of 320. The maximum scaling is 320*1.3 = 416. Basically scaling to 416 can be compatible with the screen of iPhone6 ​​plus. , this method is simple, crude, and efficient. To be honest, I think it is very efficient when using rem, which we will talk about next. However, some students reported that scaling will cause some page elements to be blurred during use.

rem can adapt to all screens in equal proportions

The above has talked about a lot of web app adaptation solutions that are currently mainstream in most companies. Next, let’s talk about how rem works. of.

As mentioned above, rem is adapted through the root element. The root element in the web page refers to html. We can control the size of rem by setting the font size of html. For example:

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

Demo The result of the above code is the button size as shown below:

I set the html to 10px to facilitate our calculation, why is 6rem equal to 60px. If the style of our .btn remains unchanged at this time, we will change the font-size value of the html and see the above changes in the button:

html{
    font-size:40px;
}

The button size results are as follows:

The above The width and height have become twice the above results. We only changed the font-size of the html, but the size of the button in the web was changed without changing the properties set by the rem of the .btn style width and height.

In fact, from the above two cases, we can calculate how much rem is 1px:

First example:

120px = 6rem * 20px (the root element sets a large value )

The second example:

240px = 6rem * 40px (the root element sets a large value)

It is deduced:

10px  = 1rem 在根元素（font-size = 10px的时候）；
20px  = 1rem 在根元素（font-size = 20px的时候）；
40px  = 1rem 在根元素（font-size = 40px的时候）；

In the above two In the example, we found that the first case button is enlarged to the second button in equal proportions. The change of html font-size will cause the size of the button to change. We do not need to change the width and height previously set for the button. In fact, this That’s what we want to see most. Why do you say that? Next, let’s look at an example:

From the above two demos, we know that changing the font-size of html can change all elements using rem units equally, so you can debug through the chrome browser Tools can be used to switch the display effect of the third demo on different devices, or by zooming the width of the browser to view the effect. We can see that no matter at any resolution, the layout of the page is switched according to the same proportion, and The layout is not messy. I simply achieved the above effect by simply changing the font-size value according to the browser's current resolution through a piece of js. All elements of the page did not need to be changed in any way.

At this point, many people will definitely ask me how to calculate the font-size values ​​​​at different resolutions?

First of all, let’s assume that the page design draft above was given to me according to the standard size of 640. (Of course, this size is not necessarily 640, it can be 320, or 480, or 375 ) to look at a set of tables.

The blue column in the above table is the size of the page in Demo3. The page is cut with a width of 640. How to calculate the value of font-site under different widths? You should be able to understand the numerical changes in the table . For example: 384/640 = 0.6, 384 is 0.6 times of 640, so the font-size under the page width of 384 is also equal to 0.6 times of it. At this time, the font-size of 384 is equal to 12px. The width of different devices is calculated in the same way.

In Demo3, I used JS to dynamically calculate the font-size of the root element. The advantage of this is that all device resolutions can be compatible and adapted. Taobao's homepage currently uses JS for calculation. But in fact, we can do adaptation without JS. Generally, when we make web apps, we will first count the mainstream screen devices of our website, and then set media query settings for those devices to achieve adaptation, for example, as follows:

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

Of course the above settings cannot be fully adapted to all devices, but full adaptation can be achieved using JS. Which one to use depends on your actual work scenario.

Below we recommend two domestic mobile sites that use rem technology. You can refer to them to see their practices. Currently, only the homepage of mobile Taobao uses rem. The homepage of Taobao native app is an embedded web app homepage. .

Taobao homepage: m.taobao.com

D X: m.dx.com

The above is the detailed content of What is rem in css. For more information, please follow other related articles on the PHP Chinese website!