1.Percentage layout
Use a percentage instead of px.
Advantages: It can solve adaptive needs very well. Disadvantages: Not flexible; you need to change the values of other elements as you add them.
2.Rem layout
Rem is based on the layout of pages and elements. When the mobile phone screen size changes, you can zoom in and out the page as long as you change the corresponding page root element.
Advantage: After the introduction of JS, the root element fontsize can be dynamically modified to automatically scale according to the phone screen. Disadvantage: The introduction of JS in head will have a little load effect
3.Meta Media Query
Dynamic setting, the proportion of several mobile phones, corresponding matching; Meta tag, through the media query according to different mobile phone pixel width and height, the condition matching
Advantages: Different CSS can be customized according to different mobile phones to achieve perfect display Disadvantages: It needs to write and match many mobile phones and sets of CSS, which requires heavy front-end work
4.Flex layout
Pros: Easy to use, easy to achieve a certain layout according to Flex rules. Disadvantages: Poor browser compatibility, only compatible with IE9 and above.