A little research on REM self-adaptation

Reference Address: http://m.ctrip.com/html5/

https://www.amazon.cn/

REM is a unit relative to the HTML root element. REM is 16 times times the PX, that is 1rem = 16px; In addition to IE, the lower version of the browser does not support it, others are supported, see:

Now most browsers Ie9+,firefox, Chrome, Safari, Opera, if we do not modify the relevant font configuration, is the default display font-size is 16px

{    font-size:16px;}

So if we want to set a 12px font size for a P tag, then using REM to write is

{    font-size: 0.75rem; //12÷16=0.75 (REM)}

The advantage of this is that as long as you change the size of the root, all the REM settings in the back will change, so that the screen fits nicely.

REM for screen fit

Before talking about the REM screen adaptation, the first thing to do is to do mobile-side adaptation of the method, generally can be divided into: 1 Simple page, the general height directly set to a fixed value, the width is generally filled with the entire screen. 2 A bit more complicated is to use percent to set the size of the element to fit, or use CSS such as flex to set some custom width. 3 again complex responsible for some of the responsive page, you need to use the CSS3 Media query property to adapt, the general idea is based on the screen different size, to set the corresponding CSS style. Some of the above methods, in fact, can also solve the screen adaptation problems, but since the coming out of REM This new thing, also must be able to take into account these aspects, the following specific use of REM:

Let's look at a simple example:

{      width: 10rem;       height: 10rem;       background-color: red;} <div class= "Con" >        </div>

This is a div, width and height are set with REM, in the browser is shown, you can see, in the browser width and height are 160px, exactly 16px * 10, then if the HTML root element of the default Font-size modified it?

{    font-size: 17px;}  {      width: 10rem;       Height: 10rem;       background-color: red;} <div class= "Con" >        </div>

Let's take a look at the results:

At this point both width and height are 170px, which shows that REM is the same with the REM when applied to the width and height, and changes its value according to the font-size value of the root element, so we should be able to think that we can set different values for HTML. To achieve the adaptation effect in our CSS style.

REM Numerical calculation

If you use REM to set the value of CSS, generally through a layer of calculation, such as if you want to set a long width of 100px Div, then you need to calculate the 100px corresponding REM value is 100/16 =6.25rem, which in our writing CSS, in fact, is a more cumbersome step operation, But this is not really a thing. Think of our current project, which is not used to build, front-end building, can fully use SCSS to solve this problem, for example, we can write a scss function Px2rem namely:

@function Px2rem ($px) {    : 37.5px;     @return ($px/$rem) + rem;}

This way, when we write a specific value, it can be written as:

Height:px2rem (90px); Width:px2rem (90px);

See here, you may find some do not understand the place, is the above that rem:37.5px is how to come, under normal circumstances is not the default 16px, this is actually the page datum value, and HTML font-size related.

REM Reference value calculation

The basic value of REM, that is, the 37.5px above is actually based on the visual manuscript we get to determine the main reasons are as follows:

1 Because the page we wrote is going to run on a different screen size device

2 So we have to write the style of the time must have a certain screen to be used as a reference, this is the visual manuscript we have to determine

3 If we get the visual manuscript is based on the Iphone6 screen as the benchmark design

The screen size of the 4 iPhone6 is 375px,

rem = window.innerwidth  /10

This calculated REM benchmark value is 37.5 (iphone6 Visual manuscript), here why divide by 10, in fact, this value is arbitrarily defined, if not divided by 10, according to our calculation of the benchmark value will be large, so that in the setting of the HTML font-size will be small, we know that the browser font-siz e if less than 12px will not show the effect, here is a list of other mobile phone

IPHONE3GS:320PX/10 = 32px

IPHONE4/5:320PX/10 = 32px

IPHONE6:375PX/10 =37.5px

Font-size of dynamically set HTML

Now the key question, how can we use different screens to dynamically set the HTML font-size, here are generally divided into two ways

1 using CSS's media query to set the

@media (min-device-width:375px) and (MAX-DEVICE-WIDTH:667PX) and (-webkit-min-device-pixel-ratio:2) {      html{font-size: 37.5px;} }

2 using JavaScript to dynamically set according to our previously calculated benchmark values, we can use the JS dynamic to calculate the current screen to match the font-size is:

document.getElementsByTagName (' HTML ') [0].style.fontsize = Window.innerwidth/10 + ' px ';

Then we'll look at the effect of the demo shown earlier.

{      width: px2rem (200px);       height: px2rem (200px);       background-color: red;} <div class= "Con" >         {                document.getelementsbytagname (' html ') [0].style.fontsize = Window.innerwidth/10 + ' px ';} , false);

Under Iphone4, display 169px

This shows that we can set different HTML base values to achieve the purpose of the different pages, of course, when using JS to set up, you need to bind the page resize event to achieve change when the HTML font-size update.

REM Fit Advanced

We know that generally we obtain the visual manuscript is mostly iphone6, so we see the size is generally double-size, before using REM, we will generally consciously will mark/2, in fact, this does not make sense, but when we use REM ', we can completely according to the size of the visual manuscript to set.

1 design to the manuscript double reason is iphone6 this screen belongs to the high-definition screen, that is, the device pixel ratio (devices pixel ratio) DPR is relatively large, so the display of the pixels is clearer.

2 General mobile phone DPR is 1,iphone this high-definition screen is 2, you can get to the current device by JS Window.devicepixelratio DPR, so iphone6 to the size of the visual manuscript is (* *) 750x1334.

3 after we get the DPR, we can cancel the browser to automatically zoom the page in viewport meta header, and set the content of the viewport yourself for example

Meta.setattribute (' content ', ' initial-scale= ' + 1/DPR + ', maximum-scale= ' + 1/DPR + ', minimum-scale= ' + 1/DPR + ', user- Scalable=no ');

4 after setting up with REM, modify

@function Px2rem ($px) {    : 75px;     @return ($px/$rem) + rem;}

Double 75, so you can follow the dimensions of the visual manuscript exactly. Not at/2, the advantage of doing this is:

1 solved the picture HD problem.

2 solved the Border 1px problem (we set the 1px, on the iphone, because the viewport scale is 0.5, so it naturally scales to 0.5px)

But REM is not everything, and there are some scenarios that are not suitable for REM use.

1 when used as a picture or some display that cannot be scaled, you must use a fixed px value, because scaling can cause compression and distortion of the picture.

2 It is not advisable to use REM when setting backgroundposition or Backgroundsize.

In the list of several online Web sites that use REM:

NetEase News: Http://3g.163.com/touch/news/subchannel/all?version=v_standard

Poly Cost: Https://jhs.m.taobao.com/m/index.htm#!all

A little research on REM self-adaptation