Table of contents

1.rem adaptation

1.1 rem unit

1.2 Media Queries (to understand)

1.3 flexible.js

2 LESS

2.1 less operation

2.2 less nesting

2.3 less variables

summary

Mobile terminal adaptation scheme:

1. flex + rem unit for adaptation effect (such as Taobao and Xiaomi mobile terminal) The current market is the most

2. flex + viewport width /vh unit for adaptation effect (such as the mobile terminal of station B) Emerging, an immediate trend

Let flex do the layout (box

child placement), let rem or vw/vh realize the size (width and height) of web page elements to fit the screen

1.rem adaptation

1.1 rem unit

rem is a relative unit, 1rem is the size of the html text

for example

html {
    font-size: 35px;
}

Then 1rem is 35 pixels at this time.

1.2 Media Queries (to understand)

The media query mediaquery can automatically detect the width of the viewport.

A very big role of media queries is to modify the html text size according to the screen width.

Use media queries, set different root font sizes according to different viewport widths, and complete the adaptation

**grammar:**

@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, different viewport widths are detected, different html text sizes are set, and the element adaptation effect can be achieved after the element is set to the rem unit

1.3 flexible.js

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

This is also a method worth promoting.

With this js file, it can help us automatically detect the screen width and automatically modify the html text size, so that the box can be adapted to rem.

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

2 LESS

less can help us convert px units to rem units.

Less is a CSS preprocessor, and the file extension of Less is .less

The CSS language has been expanded, so that CSS has certain logic and computing power.

2.1 less operation

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

}

be careful:

1. The calculation is based on the first unit, and try to write down to the last number. for example

    height: (100 / 37.5rem);

2. Division is special, and parentheses must be added.

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

2.2 less nesting

Can generate descendant selectors

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

}

After generating css:

.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 & to replace parent elements

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

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

2.3 less variables

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

grammar:

@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;
}

summary

What we need is to do mobile adaptation: The size of the elements in the page is scaled proportionally to the width of the screen (appropriately resized)

The plan 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, which is related to the size of the html text

3. Media query: Detect viewport width of screen

4. flexiable.js: can automatically modify the html text size according to the width of the screen

5. less: less gives our css computing power

   • less allows us to easily convert px to rem