• Adaptation is a headache for me. I found that the way I used in the project is not convenient to calculate and a little inaccurate. (maybe it's not used correctly) friends of God recommended other ways to test it together...

### The following methods were tested

• Method 1: set root font size + media query
• Mode 2: JS calculation (convenient)
• Mode 3: use flexible.js

#### Method 1: set root font size + media query

```*First, set html according to number (custom)
*Define media query: calculate font size according to different sizes
```
##### Initialization
```// 1. 12px is the root font size here
// 2. How is 13.5 of 360 width calculated?
[360Current screen / 320Minimum screen * 12Root size] and so on

html {
font-size: 12px;
}

@media only screen and (min-width: 320px) {
html{
font-size: 12px;
}
}

@media only screen and (min-width: 360px) {
html {
font-size: 13.5px !important;
}
}

@media only screen and (min-width: 375px) {
html {
font-size: 14.0625px !important;
}
}

@media only screen and (min-width: 400px) {
html {
font-size: 15px !important;
}
}

@media only screen and (min-width: 412px) {
html {
font-size: 15.45px !important;
}
}

@media only screen and (min-width: 414px) {
html {
font-size: 15.525px !important;
}
}

@media only screen and (min-width: 640px) {
html {
font-size: 24px !important;
}
}```
##### Use
```1. PS: measuring height of an element is 90px
2. Calculation: 90 / 2 (2 times of design draft) / 12 font sizes
//In addition to 2, according to the design draft,
[in my 750 design draft of this project, the calculation is not accurate, maybe it has something to do with the division of 2 times the figure]```

### Mode 2: JS calculation (convenient)

```<script>
window.onresize = function () {
getRem(750, 100)
}

function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
console.log(oWidth)
html.style.fontSize = oWidth / pwidth * prem + "px";
console.log(html.style.fontSize = oWidth / pwidth * prem + "px")
}
/*720 It represents the width of the design draft given by the designer, and you can write as much as you want; 100 represents the conversion ratio, and here 100 is
For future calculation, for example, if you measure a width of 100px, it can be written as 1rem, and 1px=0.01rem, etc*/
getRem(750, 100)
}
</script>```

### Mode 3: use flexible.js

```@r: 75rem;