Media queries are similar to if else in programming languages
Media query + REM adaptation —- to solve the problem of mobile box compression

1. Common pixel units in code implementation

(1) PX: a box is 100px by 100px. Px refers to logical pixels, also known as CSS pixels. In Chrome, if the font size is not set, the default font size is 16px. It is not appropriate to use px as a unit for adaptation because it is cumbersome to calculate the font size.

< font style = “font-size:20px; font-family: ‘Times New Roman’, ‘Times New Roman’; 1em = 20px 10em = 200px em not enough: it is relative to the font size of the parent element. It is also inappropriate to use em because it is always relative to the font size of the parent element

(3) the rem: R: root: root: HTML tag 1rem ==> Font size in the HTML tag 1em ==> Font size in the parent tag Font size for the HTML tag is 34px 1rem = 34px 2REM = 68px 3rem = 102px

(4) Adaptation: display the big box on the big screen and the small box on the small screen. What is adaptation? If you have a big screen, you want to make the box or the font bigger if you have a small screen, you want to make the box or the font smaller if you have 10 words on a phone of different widths, you want to make sure that they’re all on one line.

(5) Use media query to achieve adaptation: media query is similar to if else in programming language

2. Media query + REM adaptation

I have a design, a line of text, 10 words, on 750 screens, a full line, and an image that takes up half the screen. Need to use media query + REM to match, the steps are as follows:

In general, the size of the design draft is 750px. 2) We usually adjust the browser emulator to 750px and 3) restore the design exactly as it was designed, in REM. 4) Start writing style, need to determine the HTML tag fontsize, usually I will set fontsize to 100px, called rem reference value.

I have a box with width 20px and 1rem = 100px. The box is 20px and if I change it to REM, if I change it to 0.2 REM, I measure the width of the box to 55px, if I change it to REM, it's 0.55rem. To put it more simply, measure the design, and the measured Px units will be divided by 100 to create REM units. You don't need to adapt, and you will restore the 750 design on a 750px screen.Copy the code

5) The last step is to transfer the written page to other screens to complete adaptation. Conversion is also required during migration. Font size for HTML is 100px on a 750px screen. Font size for HTML is 50px on a 375px screen. Font size for the HTML is 42.6666666 pixels on a 320px screen. On a 414px screen, the font size of the HTML is 55.2px.

@media only screen and (width:750px) {HTML {font-size: 100px; } } @media only screen and (width:375px) { html{ font-size: 50px; }} @media only screen and (width:320px) {HTML {font-size: 42.6666px; }} @media only screen and (width:414px) {HTML {font-size: 55.2px; }} If we write a lot of screens to adapt, then we need to write a lot of media query code. Copy the code

JS+ REM can also be used to adapt, the specific implementation code is as follows:

/ / this function is to calculate HTML tags of the font – the size of different screen function refresh () {/ / width represents the width of the mobile phone screen let width = docEle. GetBoundingClientRect (). The width; If (width>750){width=750} let fs = width / 7.5 document.querySelector(” HTML “).style.fontsize = fs + “px”}

refresh();

// resize =>{} Window.adDeventListener (“resize”,()=>{ // The pagesHow page is displayed window.adDeventListener (” pagesHow “,()=>{refresh()})