Mobile terminal adaptation scheme

Adaptation scheme of mobile terminal:

1. flex + rem units have the most adaptation effects (such as Taobao and Xiaomi mobile terminals) in the current market
2. flex + viewport width /vh unit is a new trend for adaptation effect (such as mobile terminal of station B)

Let flex make the layout (box placement), and let rem or vw/vh realize the size (width and height) of web page elements to fit the screen

rem adaptation

rem unit

Rem is a relative unit. 1rem is the size of html text

such as

<style>
html {
    font-size: 35px;
}
</style>

Then 1rem is 35 pixels.

Media query

mediaquery can automatically detect the width of the viewport.

A very important function of media query is to modify the size of html text according to the screen width.

Using media query, set different root font sizes according to different viewport widths to complete the adaptation
Syntax:

@media (width:375px) {
    html {
        font-size: 40px;
    }
}

@media (width:320px) {
    html {
        font-size: 30px;
    }
}

Comprehensive:

@media (width:375px) {
    html {
        font-size: 37.5px;
    }
}
@media (width:414px) {
    html {
        font-size: 41.4px;
    }
}


.box {
    width: 5rem;
    height: 5rem;
    background-color: pink;
}

Through media query, we can detect different viewport widths, set different html text sizes, and set rem units for elements to achieve the effect of element adaptation

flexible.js

The media query is extremely cumbersome to write, and the detection is not accurate enough, so we use flexible js this js file detects the change of screen window in real time through js to detect the width of viewport.

This is also a way worth advocating.

With this js file, we can automatically detect the screen width and automatically modify the html text size, so that the box can be adapted with rem.

<script src="./js/flexible.js"></script>

How to convert px of design draft into rem

Question:

1. flexible can modify the size of html text, and modify the text size: the current screen / 10 is the text size

   For example, if the current screen is 375px, the html text size will be 37.5px after adding flexible

2. Is the element size fixed in our design draft? Yes, it's a px unit, but when we develop, we need to use rem to adapt.

3. So how can we convert the px we measured into the adapted rem?

   Using the measured px value directly / 37.5 is the value of rem

LESS

less can help us convert px units to rem units.

Less is a CSS preprocessor, and the suffix of less file is less

The CSS language is expanded to make CSS have certain logic and computing power.

less operation

.box {
  width: 100px + 100;
  // Note: the first unit shall prevail when calculating the conversion of units
  height: (100 / 37.5rem);
  // height: (100rem / 37.5);
  // height: 100px - 50;
  margin: (20px * 5) auto;
  padding: (10px / 5);
  border: 1px + 2 * 3 solid red;

}

Note:

1. The calculation shall be subject to the first unit and written to the last number as far as possible. such as

    height: (100 / 37.5rem);
   

2. Division is special, so you must add parentheses.

3. Don't forget to multiply and divide before adding and subtracting

less nesting

.father {
    width: 500px;
    height: 500px;
    background-color: purple;
    // children
    .son {
        width: 200px;
        height: 200px;
        background-color: pink;
        p {
            color: red;
        }
    }

}

generate css After:
.father {
  width: 500px;
  height: 500px;
  background-color: purple;
}
.father .son {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.father .son p {
  color: red;
}

When we write pseudo classes and pseudo elements, we often use & instead of the parent element

.nav {
  width: 100px;
  height: 100px;
  background-color: pink;
  &::before {
    content: '1';
  }
  &:hover::before {
    color: red;
  }
}

less variable

The biggest advantage of variables is that they are easy to use and modify.

Syntax: @ variable name: value;

@fontSize: 16px;
@suibian: hotpink;
body {
  background-color: @suibian;
}
p {
  background-color: @suibian;

}
div {
  color: @suibian;
}
nav {
  border: 1px solid @suibian;
}

body {
  background-color: hotpink;
}
p {
  background-color: hotpink;
}
div {
  color: hotpink;
}
nav {
  border: 1px solid hotpink;
}

less import

The import of less is actually the import of less files.

@import './variable.less';
@import url(./variable.less);

The advantage of using less import is that it reduces the number of link tags on html pages.

less export

You can use the plug-in to export settings:
"less.compile": {
"out": "... / css /" / / set the path to export css
},

less prohibit export

// out: false

Summary

What we need is to adapt the mobile terminal: the size of the elements in the page is scaled in proportion to the screen width (appropriately adjusted)

The scheme is as follows:

flex + rem + flexiable.js + less

1. Our mobile terminal adopts flex layout.
2. rem unit: for mobile terminal adaptation.
   • The relative unit of rem is related to the size of html text
3. Media query: detect the viewport width of the screen
4. flexiable.js: the size of html text can be automatically modified according to the width of the screen
5. less: less gives our css computing power
   • less allows us to easily convert px to rem