The concept of adaptation: to implement page comparison on different devices, that is, to change the number of CSS pixels that an element occupies on different devices

For example, if you have a box on the page that is 50% of the width of the mobile device, and you change the mobile device, put the box from the iPhone 6’s 375px (CSS pixels) device width under the 6 Plus 414px (CSS pixels) device width screen, The two boxes still take up 50% of the width of the device

Let’s start with em and REM:

In PC browsers (mostly Google Chrome), the default font size is 16px and the minimum font size is 12px. But there is no default font size on mobile.

em

Font size relative to itself e.g. 1em = 16px

rem

Font size relative to the HTML root tag

Therefore, mobile adaptation can be made by obtaining the viewport width of the device

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <! -- Perfect viewport -->
  <meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>rem</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 8rem;
      height: 8rem;
      background-color: #f60;
    }
  </style>
</head>
<body>
  <div class="box">test</div>
</body>
<script>
  let html = document.querySelector('html')
  // 1rem = html.style.fontSize
  // the layout viewport is 16rem wide
  // the width of the design is 750px (based on iphone6), which is 16rem
  html.style.fontSize = document.documentElement.clientWidth/16 + 'px'
</script>
</html>
Copy the code

Get viewport width is 750px, then 1rem = 750px; Divide by 16 to get: viewport width 1rem = 750/16 + ‘px’;

But the above method is flawed, because the weight is low, so the property of the font size will be changed; So we want to add property! Important adds weight, however! Important is a CSS property and cannot be used in tags, so here’s the solution.

Create a style tag and add the HTML attribute font-size to the tag to set the font size

The perfect solution

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <! -- Perfect viewport -->
  <meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>rem</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 8rem;
      height: 8rem;
      background-color: #f60;
    }
  </style>
</head>
<body>
  <div class="box">test</div>
</body>
<script>
  // Create a style tag
  // Add content to the tag. The content is the font size of the root tag
  // Then place the created style tag in the head tag
  (function () {
    let styleNode = document.createElement('style')
    let width = document.documentElement.clientWidth/16
    styleNode.innerHTML = "html {font-size: "+ width +"px ! important}"
    document.head.appendChild(styleNode)
  })()
</script>
</html>
Copy the code

Both results are shown in the following figure: p9-juejin.byteimg.com/tos-cn-i-k3…

Pros and cons of Rem adaptation

  • Advantages: Does not destroy the perfect viewport

    <! <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">Copy the code

  • Disadvantages: Converting px values to REM values is too complicated