H5 learning, h5 learning tutorial

H5 learning, h5 learning tutorial

1. html {font-size: 62.5%;} // The reason for not having to use font-size: 10px: (After setting 62.5%, there will be1rem = 10pxIt is easy to use rem to specify the size of the element. In this way, the font-size can be changed directly in the response mode without the need to calculate the size of the elements in other styles. Another advantage of defining the size with rem is that it is better suited to scaling/browser setting of the font size (because rem changes synchronously relative to the font size ).

As for the reason for choosing 62.5% rather than 10px, the main reason is the comprehensive consideration of compatibility and future development trends. The meaning of the unit of px has become increasingly confusing, it is almost impossible to assess whether devices will always be compatible with px on the web page as they are now, or to make px return to the original meaning of "pixel, but 62.5% represents the default font size of 62.5%, which is basically not confusing-derived from the https://segmentfault.com/q/1010000002411895

)

2. Percentage of width

3. rem can be used for height

4. It is best not to use display:-webkit-box for float;

. Box {
/* Display */
Display:-webkit-box;
Display:-moz-box;
Display:-ms-flexbox;
Display:-o-box;
Display: box;

/* Box-orient */
/**
* Vertical column
* Horizontal row
*/
-Webkit-box-orient: vertical;
-Moz-box-orient: vertical;
-Ms-flex-direction: column;
-O-box-orient: vertical;
Box-orient: vertical;

/* Box-flex */
-Webkit-box-flex: 1;
-Moz-box-flex: 1;
-Ms-flex: 1;
-O-box-flex: 1;
Box-flex: 1;

/* Box-pack */
-Webkit-box-pack: justify;
-Moz-box-pack: justify;
-Ms-flex-pack: justify;
-O-box-pack: justify;
Box-pack: justify;

/* Box-align */
-Webkit-box-align: justify;
-Moz-box-align: justify;
-Ms-flex-align: justify;
-O-box-align: justify;
Box-align: justify;
}

 

5. Like the PC end, js in H5 should also be written in window. onload (function () {}) or $ (function () {}).