Recently, the company is hiring, and most of the answers to the mobile adaptive questions are not the answers I think. Today, I want to talk about my understanding of mobile terminal adaptation, and welcome to correct my mistakes.

The most important thing for mobile adaptation is the unit. The screen size of mobile terminal is too large, so it is usually implemented in units. Then, most mobile terminals will define a maximum width, and the mobile terminals that exceed this width will only display this maximum width. Typically we use REM units, along with VW, VH, and percentage, and this solves the adaptive problem on the mobile end.

Rem should not say more, suggest using hand tao can, many will write their own, simple a few lines of code, but still suggest using hand tao, do not like to reference external, can download to the local. Download and look at the source code. There is a self-executing function that initializes CSS code. There is also a function that adds meta, which has the code to determine android, iPhone and DPR. Also listen for document and window resize, pagesHow, DOMContentLoaded. You can download it and format the code for a quick look.

G.t BCDN. Cn/MTB/lib – fle… ?? Flexible_css js, flexible. Js.

Vw, VH units are actually percentages, percentages of the visible area. We also use percentages, which are for parent elements, while VW and VH are visible areas. For example, if you define a width of 100vw inside a block element with a fixed width and height, which is actually 100 percent of the visible window, it will exceed the parent element.

With units, and table, Flex, and Grid layouts, mobile adaptation is almost perfect. Using Flex is generally recommended. A table creates a table, and a Grid layout is the most powerful CSS layout. A normal scenario is similar to a Flex layout, but Flex is a one-dimensional layout and Grid is a two-dimensional layout. Compatibility is hardly a problem. If you’re interested, check it out for yourself.

Mobile adaptive will also have a more common pit, fractional pixel problem. For example, 1px borders and rounded corners are not round. Because decimal pixels are rounded, but decimal pixels that are rounded or added are filled with neighboring elements. Also, the article said that REM does not support DPR of 3. Everything else seems fine.

A lot of people will mention media query, in fact, now do this aspect of adaptation is less, most are a SET of PC and a set of mobile terminal, there will be very little of the different size of the different layout of the website.

So the next time someone asks you how to do adaptive, just answer rem units plus VH, VW, width percentage, and Flex layout. If you’re still asking, just briefly explain how REM, VH, and VW work.

This is my understanding of mobile adaptive, there should be some other good solutions, welcome to comment.