This is the second day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Em and rem

Both EM and REM are one of the many units of length, which are defined by MDN as

Em is a unit of relative length that represents the calculated value of the element’s font-size. If used in the font-size attribute itself, it inherits the font-size of the parent element.

Rem represents the font-size size of the root element (for example, the font-size of the < HTML > element). When used on the root element’s font-size, it represents its initial value.

Other length units include px(pixels), VW (100vw == viewport width), Vh (100vh == viewport height), and so on.

Note:

• Chrome’s default font-size is 16px
• Chrome defaults to a minimum size of 12px (which can be changed in Settings), which means that even if you setfont-size < 12px< span style = “font-size: 12px

Features of mobile terminal

Open developer tools and switch to the mobile side, we find that all the phones display the same interface, the only difference is the screen size (width and height).

Mobile terminal adaptation solution

Solution 1: Media query

As you can see from the above, there are so many different widths and heights for a phone like the iPhone alone, let alone all phones, that it is not desirable to use media queries to do this.

Plan 2: Percentage layout

Idea: Instead of a fixed width/height, set the width and height to a percentage, so that no matter how the screen size changes, the original ratio is always the same

As you can see, the element width varies with the screen width. But the problem here is that the height of the element can’t be related to the width of the screen, so for example, if we want the height to be half the width, we can’t do that, so we can’t keep the original proportions, and if it’s an image, it’s going to deform significantly.

Solution: Remove the height and use the padding to prop up the element

width: 40%; /* 40% of the screen width */
height 0;
padding-bottom: 20%; /* 20% of the screen width */
Copy the code

In this way, the percentage layout is used to achieve the effect of adaptive width and height

Code: js.jirengu.com/peziq/3/edi…

Of course, to introduce our topic, there is another method called dynamic REM.

Dynamic REM (adjust REM dynamically with JS)

From the analysis of the percentage layout above, it’s easy to see that you can scale according to the screen width simply by associating the width and height of the element with the screen width.

Instead of using a percentage layout, let’s fix the width and height of the element, and have both units of length associated with the width of the phone screen.

But neither PX, EM or REM is related to the width of the phone’s screen (VW is related to the width of the screen)

Correlate REM with the width of the phone’s screen

All units of length except vw are independent of the width of the screen, but 1rem == HTML, so we just need to make font size == screen width (in JS). This relates rem to the width of the phone’s screen.

1 rem == html font-size == viewport width

We use JS to implement the border-size == screen width

var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px; }')
Copy the code

The effect is as follows:

Each time JS is run, the value of REM changes, that is, JS dynamically adjusts REM, which is dynamic REM.

Fine-tune REM

1. Don’t forget that you need to add a Meta viewport on the mobile terminal to properly display dynamic REM effect

   

2. Rem doesn’t have to be equal to the screen width

   For example, we can set 1 rem == HTML font-size == viewport width/10, i.e. 1 rem == 0.1 width

   document.write('<style>html{font-size:'+pageWidth/10+'px; }')
   Copy the code

   So we don’t have to always write in decimals when we write width and height, so we can write in whole numbers

   

   However, it is important to be careful not to set the scale too small, otherwise it will cause bugs. For example, if you set 1 rem == 0.01width, because in Chrome, the default minimum font size is 12px, and when the screen width is 375px, the HTML font size is 3.75<12, so the font size change does not take effect. The browser still calculates the minimum 12px.

3. Rem can coexist with other units

   If the value of REM is very small, don’t use the VALUE of REM. For example, if I want to add border to the element, I calculate 1px/640 == 0.0015 == 0.015 REM, so the value of REM is too small. Border will be imprecise.

   Therefore, when THE value of REM is too small, it may not be used, and REM can be mixed with other length units.

Let px automatically change to REM

It is troublesome to calculate THE REM value every time. We can directly translate px into the correct REM value by using the function @function of SCSS.

The steps are as follows:

1. npm config set registry https://registry.npm.taobao.org

2. touch ~/.bashrc

3. echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc

4. source ~/.bashrc

5. npm i -g node-sass

6. mkdir ~/Desktop/scss-demo

7. cd ~/Desktop/scss-demo

8. mkdir scss css

9. touch scss/style.scss

   Add the following to the SCSS file

   $ cat scss/style.scss @function px($px) {
     @return $px/$designWidth*10 + rem;
   }
   
   $designWidth: 400px; // 400px is the width of the design. You should fill it in according to the width of the design
   
   .child {
     width: px(160px);
     height: px(80px);
     margin: px(20px) px(20px);
     border: 1px solid red;
     float: left;
     font-size: 16px;
   }
   Copy the code

10. node-sass -wr scss -o css

The final execution result is as follows:

Code: js.jirengu.com/zokat/2/edi…