CSS Unit REM---Mobile end of the treasure

What is 1.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. See REM Everyone will remember EM unit em (font size of the element) is the unit relative to the font size of the parent element. They are really similar, except that a calculated rule is dependent on the root element one is dependent on the parent element to calculate

Why is 2.rem used? How does REM work?

Let's start with the usual way of mobile layout.

1. Streaming layouts (controlled by a large percentage of the page) are sure to have a compatibility problem with a lot of percentages or just run. Percentages do not accurately control the size, resulting in a significant difference between the results and the design drawings.

2. Fixed width. As the name implies is to write the width of the dead to do so, the front end will be very happy.

3. Responsive layout. The first point of response is to remember to refer to the META tag

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0 ">

Otherwise your page will not be self-adapting this is important then control the minimum zoom value of the page by the minimum width. If you use PX as your unit, the height of your page on different devices is the same, only the width changes, and the other values do not change.

This will cause problems with your page, which is not very strong on a device with a width of 500 or less, and you can feel that the font is small and very small, which makes the entire page look uncoordinated. If it is a picture put on this page he will wait for the proportion to be reduced to the whole (including content). and now the page does not make the overall content of the zoom .

REM can scale the screen proportionally

HTML {font-family: ' opengrilw '; font-size: 10px;} . Top { font-size: 1.5rem; height: 1.5rem; background-color: #8FC5FB; line-height: 1.5rem;}

As shown in the code above, we only need to control the font size of the HTML to control the scale of the entire page (10px=1rem in the case of font-size=10px);

Give me a simple demo.

<div class= "BTU" > button </div>html{font-size:10px;}. BTU{width: 12rem; height: 4.5rem; line-height: 4.5rem;  Font-size: 1.5rem; background-color: #A21E6E; text-align: Center; color: #fff;}

Change now

HTML {font-size: 30px;}

3 times times the overall magnification

3. Control the font of HTML via JS

　　REM can control the size by the root element, but it can't always write a font without changing the screen, not to mention the number of devices with different widths on the mobile side. I'm tired of not saying that I can't write it all.

So we have to think of a way to automatic control, I think of JS

　　

//Resize the window size changes when it is triggered. But the time is not triggered when the first load is    resizeevt = ' orientationchange ' in window? ' Orientationchange ': ' Resize ',    //alert (resizeevt);    Whether the phone screen reverses Orientationchange    window.addeventlistener (Resizeevt, Chuk, false);//IE Google    Document.addeventlistener (' domcontentloaded ', Chuk, false);//    Firefox {    //       Chuk ()    ;} );    function Chuk (){      var w=window.innerwidth| | document.documentelement.clientwidth| | Document.body.clientWidth;      var js=10* (w/320);      if (js>20) {          js=15;//the judgment here is written by myself, because it looks too big      on the PC side }       document.documentelement.style.fontsize=js+ ' px ';    }

Image is for reference only, can be realized by modifying JS.

　　

CSS Unit REM---Mobile-end treasure