Several adaptation methods of mobile terminal

Percentage adaptation mode

In this method, only the width can be adapted, but the height cannot be adapted. Only a certain height can be set

Requirements: four div s, with a height of 100px and an equal width, are arranged horizontally

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <style type="text/css">
        body {
            margin: 0;
        }
        div {
            width: 25%;
            height: 100px;
            float: left;
        }
        .box1 {
            background: red;
        }
        .box2 {
            background: blue;
        }
        .box3 {
            background: green;
        }
        .box4 {
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

flex layout adaptation (used with rem adaptation)

Compatibility
IE10 and above, ios9 and above, Android 4.4 and above

characteristic
By default, all child elements are displayed in one row, even if you give them a large width

If the parent adds this attribute, the float and vertical align of the child will become invalid

If the model is compatible with the lower version, prefix - webkit -, including all the attributes described later

For container attributes (parent element style), see the rookie tutorial or Ruan Yifeng's tutorial. Here are some key knowledge.

flex-direction: Arrangement direction of child elements (direction of spindle, if set) column,It means that the spindle has rotated 90 degrees)

flex-wrap: Line feed mode

flex-flow: Abbreviations of the above two methods

justify-content: Horizontal alignment (alignment of child elements on the main axis)

align-items: Vertical alignment (alignment of child elements on the cross axis)

align-content: Multiline vertical alignment (alignment of multiple axes)

Item properties (child element styles)
Order: sort position / / if two values are equal, sort them in writing order

Flex growth: extension scale
Flex growth when the width of the parent is greater than the sum of the widths of all child elements, set the expansion ratio of child elements according to the remaining space of the parent (after setting, the fixed width given by the element will be overwritten). It is a coefficient
The default is 0, that is, if there is remaining space, it will not be expanded
Remaining space
Remaining space = width of parent - the sum of the widths of all child elements
Note: if the initial width is not set and there is no content, it defaults to 0, otherwise it is the width of the content. For example, if the text is set, it will have an initial width.

    Calculation formula of sub element width
        Width of child element=(Width of parent-Width and width of all child elements)//Sum of flex growth attribute values of all child elements * flex growth attribute value of child elements + initial width of child elements

Flex shrink: shrinkage ratio
Flex shrink when the sum of the widths of all child elements is greater than the width of the parent, set the shrinkage ratio of the child elements according to the excess space (after setting, the fixed width given by the element will be overwritten). It is a coefficient
The default is 1. If you give a 0, it will not shrink
Out of space
Out of space = width of all child elements and - width of parent

Calculation formula of sub element width
            1,Calculate the sum of the widths of all child elements beyond the space-Width of parent
            2,Initial width of child element*Of child elements flex-shrink value
            3,Calculate the sum of all the results in step 2
            4,The second step for each child element/Step 3*First step
            5,Initial width of child element-Step 4

Flex basis: the size of the element
flex: short for the above three attributes
Align self: separate vertical alignment (in the direction of the cross axis)

Dynamically generate viewport adaptation mode

This method is actually to dynamically set the scaling scale, dynamically create a meta tag, and put the calculated scaling scale into the content attribute of the tag

If the target size is set to 320, the whole screen width is 320px, and if it is set to 750, the whole screen is 750px, so that each element in our page can set the width and height according to the design drawing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        (function(){
            var w = window.screen.width;
            var targetW = 320;
            var scale = w/targetW; //Current size / target size
            var meta = document.createElement("meta");
            meta.name = "viewport";
            meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
            console.log(scale);
            document.head.appendChild(meta);
        })();
    </script>
    <!--
    <meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    -->
    <style type="text/css">
        body {
            margin: 0;
        }
        div {
            width: 80px;
            height: 100px;
            float: left;
        }
        .box1 {
            background: red;
        }
        .box2 {
            background: blue;
        }
        .box3 {
            background: green;
        }
        .box4 {
            background: yellow;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

rem adaptation mode

The first step of rem adaptation method is to set the constraints of the viewport (fixed)

Let's take a look at what happened before rem adaptation Title
The analysis results show that when the screen width is 320, the width ratio of the box is 200 / 320. When the screen size of a mobile phone is different, such as 375, the width ratio of the box is 200 / 375

Then, in different mobile phones, the proportion of the same box to the width of the whole screen is different, so the effect is also different

For this problem, REM can be used for adaptation. The most important thing of REM adaptation is to set the width of the screen area according to the font size of the html root element, so that the whole screen becomes 1rem as the benchmark, and then try rem as the unit when setting each element

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>Title</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    width:2rem;
    height: 0.5rem;
    background-color: red;
  }
</style>
<script>
  (function () {
    // Gets the width of the screen area
    var w = document.documentElement.clientWidth
 
    // Get html root element
    var htmlNode = document.querySelector('html')
 
    // Set font size
    htmlNode.style.fontSize = w + 'px'
  })()
</script>
<body>
  <div class="box"></div>
</body>
</html>

In this way, when the screen width is 320, 1rem is equal to 320, 2rem is equal to 2 * 320, and when the screen width is 375, 1rem is equal to 375, that is, 1rem will adapt to the screen width

Media query

What is media query
Media Query is a new syntax for CSS3.

Using @ media query, you can define different styles for different media types
@media can set different styles for different screen sizes

When you reset the browser size, the page will also be re rendered according to the width and height of the browser

At present, multimedia query is available for many apple phones, Android phones, tablets and other devices

Media query syntax specification
Start with @ media and pay attention to the @ symbol

mediatype media type

Keyword and not only

The media feature must be contained in parentheses

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype query type
Dividing different terminal devices into different types is called media type

keyword
Keyword connects media types or multiple media features together as a condition for media query.

And: multiple media features can be connected together, which means "and".
Not: excluding a media type, which means "not" and can be omitted.
only: specifies a specific media type, which can be omitted.

Media characteristics
Each media type has its own specific characteristics, and different display styles are set according to the media characteristics of different media types. Let's know three for the time being.

Note that they are to include in parentheses:

Tags: css3 html css

Posted on Fri, 22 Oct 2021 20:10:45 -0400 by noirsith