"CSS" REM and its replacement scheme

Mobile Web front-end development in fact, there are often some headaches, such as screen adaptation, 1 pixels problem, REM is a relatively perfect screen adaptation of a set of solutions, but as the business in-depth, any solution has its excellent and insufficient place, REM This package is the same, The author of this article from the perspective of their own projects, a simple talk about the REM of the package of the acquisition and loss.

First, the following principles are introduced:

What is REM? It is the new relative unit of CSS3, the English is all called the font size of the root element, which means to set the font size according to the root elements of the page, and another EM (font size of the element) according to the parent element of the font sizes of the newcomer is different, It is based on the root node, which is the HTML element to set the size, for a simple example:

HTML {    font-size: 12px;} P {    width: 1rem; //Actual length 1 * = 12px;}

It is also because of this mechanism that we can change the style of the elements that set REM units in a way that only changes the fontsize of the root element.

However, as mentioned earlier, there are no programs that have no side effects, and REM has side effects:

1, the mobile terminal for floating point calculation is not as accurate as the PC. in actual work we often encounter the root node fontsize set to 10px, the actual element of the property values (such as border:. 1rem solid #000) There is a decimal point, in this case, although the theoretical px value should be 1px, But in fact it is possible to become 0px (that is, visually invisible), which is why the Borderradius set of REM looks like an ellipse, so the ' PX ' unit has its own space in this context, Although this may seem to violate the original intention of using REM.

2,the CSS drawing can be rem, but the picture is not. as we all know, the clarity of the image needs to be within its actual resolution range to ensure that if the image is arbitrarily stretched by the REM setting, the picture is not what we want, so there are other considerations when setting up the picture.

3, about the rootelemenet elements of the fontsize, not always so accurate, that is, the package is a compatibility problem. the actual work of the author found that there are some more "alternative" mobile phone in the use of REM practical effect is very strange, their internal calculation is quite a bit heinous, so, even if the large range of use of REM as the main unit, but many scenarios, '% ' this proportion of units still have the use of space.

Having said the merits of REM, let's talk about alternative scenarios:

I have learned about the program has two sets:

1, based on the VH,VW program:

In fact the relevant units total 4, VH, VW, Vmin, Vmax, they collectively referred to as Windows (Viewport, also known as the viewport) units, VW, VH respectively, relative to the window width/height of the percentage (such as 1VW represents the width of the window 1%), read here, Smart readers should be able to imagine , if you can set relative to the percentage of the window, is it possible to adapt to various screens? Yes, it does look like this, but, again, there will be no coverage of the scene, such as fontsize (in fact, have you ever thought, perhaps the Committee formulated VH, VW, REM and other units, in fact, the original intention is to use together?) ), and there are some compatibility problems, so practice is not too much.

2, based on the meta-set viewport scale scheme:

This scheme is also originated from the mobile side that famous 1 pixel problem , the implementation is actually very simple, mainly this:

<!--     server-side based on the first time the front-end request page with client information, the client is determined to be several times the screen, and then corresponding settings viewport scale--<   Name= "Viewport"  content= "initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, User-scalable=no ">

Once this is set up, the ' PX ' unit can be used normally in the style, but physically it will behave as the corresponding actual pixel, using scale to compensate for the difference between the logical pixel and the physical pixel, and pull the actual usage scene back to the familiar "normal" scene we used to The previous REM scenario is then used in scenarios where adaptation is required, since the scene with the decimal point can be covered with the "true" px, almost complete with rem flaws.

The first package because of the compatibility of the stealth pit, so the actual use is not much, and the second solution, combined with REM is today's mainstream implementation, but it also has a small flaw, this setting is equivalent to the front-end page needs to service directly out (but in order to SEO, SSR is also a big front-end of the era of a trend bar), can not simply publish static pages.

A simple summary, in fact, the mobile side due to some differences in performance and PC, and the use of some of the difference in the environment, at the beginning of the browser design will be some specific to the mobile side to do some special implementation, this article briefly summed up some of the author's recent research in some of the adaptation programs, but the mobile side of these "characteristics" Android 7, which has recently begun to grow in popularity, has more "features" waiting for us to fit in, with the front end still in the way.

"CSS" REM and its replacement scheme