About Mobile-side adaptation

Usually the way the mobile end is laid out

1. REM layout, by dynamically setting the font-size in the root directory to reach the element size "adaptive", usually with the percent layout

2, fixed pixel fixed viewport width.

3, the most troublesome media query, depending on the width of the device viewport set different styles, in other words, a page has multiple sets of styles. It can be said to be an authentic responsive layout.

The distress of a conventional approach

The general practice of these practices has some drawbacks that are regrettable:

1, REM and percent layout, this kind of layout rem eventually has the limit, when the screen is relatively large, the page elements began to become so some uncoordinated.

2, set the fixed viewport using fixed pixels to do, then the problem comes, if you set the 640px, then it means the maximum in 640 of the device can show normal, once the device is more than 640, there will be some local layout problems, the most critical or there are some compatibility issues, Android part of the mobile phone can be down, and the actual below nothing, the height of the HTML is much more inexplicable.

3, media query, the normal way this is the best, but unfortunately, it will greatly increase the workload of the UI, but also greatly increase your workload

About Mobile-side adaptation