Media query + REM adaptation —- to solve the problem of mobile box compression

1. Media query + REM adaptation (key content)

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 adapt, the steps are as follows: 1) get the design draft under normal circumstances, 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. So the box is 20px and it’s going to be rem and it’s going to be 0.2rem

The width of a box is 55px, or 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. Copy the code

@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()})

2. Addendum: Common pixel units in code implementations

(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-size :20px; mso-font-kerning: 0pt; mso-font-kerning: 0pt; mso-font-kerning: 0pt; 1em = 20px 10em = 200px em not enough: it is relative to the font size of the parent element. Copying code to use em is also inappropriate because it is always relative to the font size of the parent element (3) 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