Common layout on mobile
1. Flow layout
The basic difference between the mobile layout and the fixed-width layout is that the measurement unit of the site size is different. The mobile layout uses a percentage instead of px as the unit. In addition, the flow layout uses float . The advantage of float is that if the width is too small to fit two elements, the latter element will automatically scroll to the bottom of the previous element, and there will be no horizontal overflow (overflow), which is avoided. The appearance of a horizontal scroll bar.
2. Media queries and rem
Set the font-size of the root element by querying the width of the current browser, and the rem unit is proportional to the font-size of the root element.
Three, flex layout
Flexbox is a new layout mode introduced by CSS3, also known as flexible layout, which automatically allocates space according to the remaining width of the page.