H5 Mobile Self-adaptive summary

A simple layout page, directly via meta tag <meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" Name= "Viewport" > and Percent realization;

Second, the more complex page

1. Resolution Resolution: JS calculates a different screen width. HTML element aspect ratio and font size, the distance between elements is adaptive, using REM units. By calculating the different width of the screen to set the size, so as to calculate the REM, to achieve adaptive;

2. Media Queries: Medium query (to avoid the appearance of 13px 15px fonts)

3. Use JS to calculate the scale value of the META tag, such as hand scouring. Calculate DPR to set different scale

4.lib.flexible Solutions
Introduced<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>

This scheme will be divided into visual manuscripts 100份 (in order to be compatible with VH,VW units later). Each part is called a unit A. At the same time, 1rem units are identified as 10a. Take 750 of the visual manuscript example: (Default 480 750 11,253 visual manuscripts)

1a = 7.5px
1rem = 75px

div {

    width: 1rem;     height: 0.4rem;    font-size: 12px; // 默认写上dpr为1的fontSize}[data-dpr="2"] div {    font-size: 24px;}[data-dpr="3"] div {    font-size: 36px;}

H5 Mobile-Adaptive summary