3. The mobile terminal is adapted

3.1 percentage adaptation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta ="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 25%;
      height: 100px;
      float: left;
    }
    .box_1{
      background-color: #673AB7;
    }
    .box_2 {
      background-color: #E91E63;
    }
    .box_3 {
      background-color: #009688;
    }
    .box_4 {
      background-color: #FF5722;
    }
  </style>
</head>
<body>
  <div class="box_1"></div>
  <div class="box_2"></div>
  <div class="box_3"></div>
  <div class="box_4"></div>
</body>
</html>

This percentage is relatively simple adaptation, but the drawback is not adapted to the height, because the height is usually not determined, therefore, the percentage of this embodiment is generally adapted to the width of the adaptation

3.2.viewport adaptation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <script>
  (function(){
    // 固定目标宽度
    var targetWidth = 320
    // 获取屏幕宽度
    var w = window.screen.width 
    // 算出设备屏幕宽度是目标宽度的多少倍
    var scale = w / targetWidth
    // 创建一个meta标签
    var  meta = document.createElement('meta')
    meta.name = "viewport"
    meta.content="user-scalable=no, initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale
    document.head.appendChild(meta)
  })()
  </script>
  <meta ="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
      margin: 0;
    }
    div {
      width: 80px;
      height: 100px;
      float: left;
    }
    .box_1{
      background-color: #673AB7;
    }
    .box_2 {
      background-color: #E91E63;
    }
    .box_3 {
      background-color: #009688;
    }
    .box_4 {
      background-color: #FF5722;
    }
  </style>
</head>
<body>
  <div class="box_1"></div>
  <div class="box_2"></div>
  <div class="box_3"></div>
  <div class="box_4"></div>
</body>
</html>

viewpoint of the core idea of adaptation is achieved through a variety of devices to control the zoom viewport adaptation, when we write is based on a fixed width to write

3.3.rem adaptation

rem is a unit of the font, the value varies depending on the html element changes size, width and height we can use rem, expressed using rem to do it is to adapt the principles of the px unit rem page elements into a unit, then the dynamic changes html font size, font size change html, then to rem as a unit the size of a child element will be followed by changes

Here is more crucial dynamic html to set the font size, according to the set here is to be set according to the width of different devices, so we can display different sizes on different devices, different sizes to achieve the proper equipment match

1.1rem equal to the browser's default html elements font-size value

.html {
  font-size: 16px;
}
p {
  font-size: 2rem; /* 2 * 16 =  32px */
}

2. Dynamic changes html element size font-size, that is popular set of length 1rem

var rem = document.documentElement.clientWidth / 10

document.document.documentElement.style.fontSize = rem + "px"

NOTE: The above "document.documentElement.clientWidth / 10" 10 here may be other values, 20, 30 can be, we do px turn rem when to use

3. When used, we need to turn into px rem, for example: 750px draft design width, the width of which is a box 100px, 100px height, if iphone6 displayed below, showing how to use the rem width and height of the box it

公式： 像素/rem基准值

In the following iphone, document.documentElement.clientWidth value 375, rem reference value is 375/10 = 37.5, then, converted into 100px rem to:

100px/37.5 = 2.66667rem(约等于)

3.4. Vw-based adaptation program

Introduction of the viewport css3 units, VW represents the width of the viewport, VH denotes the height of the viewport, the viewport is divided into an average of 100 copies, each as a unit, then 1vw = 1% viewport width, 1vh = 1% viewport height

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + "px"
  </script> -->
  <meta ="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
      margin: 0;
    }
    div {
      width: 100vw;
      height: 10vh;
      float: left;
    }
    .box_1{
      background-color: #673AB7;
    }
    .box_2 {
      background-color: #E91E63;
    }
    .box_3 {
      background-color: #009688;
    }
    .box_4 {
      background-color: #FF5722;
    }
  </style>
</head>
<body>
  <div class="box_1"></div>
  <div class="box_2"></div>
  <div class="box_3"></div>
  <div class="box_4"></div>
</body>
</html>

Screw classroom video lessons Address: http://edu.nodeing.com

Layout movement end (2)

3. The mobile terminal is adapted

3.1 percentage adaptation

3.2.viewport adaptation

3.3.rem adaptation

3.4. Vw-based adaptation program

Guess you like