Mobile layout skills

1. Try to use flexible layout on the mobile terminal:

display:flex;display:-webkit-flex;

justify-content: space-between;-webkit-justify-content: space-between;(水平)

flex-start: Default value. The item is at the beginning of the container.
flex-end: The item is at the end of the container.
center: The item is in the center of the container. (Common)
space-between: The item is in a container with white space between the lines. (Common)
space-around: The item is placed in a container with space before, between, and after each line.

align-items: center;-webkit-align-items: center;(垂直)

flex-start: The border of the start position of the side axis (vertical axis) of the flex box element is immediately adjacent to the start border of the side axis of the row.
flex-end: The border of the start position of the side axis (vertical axis) of the flex box element is immediately adjacent to the end border of the side axis of the row.
center: The flexbox element is centered on the row's lateral (vertical) axis. (If the dimension of the row is smaller than the dimension of the flexbox element, it will overflow the same length in both directions) (common).
baseline: If the inline axis and the side axis of the flexbox element are the same, this value is equivalent to 'flex-start'. Otherwise, this value will participate in baseline alignment.
stretch: If the value of the property specifying the size of the side axis is 'auto', its value will make the size of the item's margin box as close as possible to the size of the line on which it is located, but at the same time, it will follow the 'min/max-width/height' properties. limit.

flex-wrap:wrap;-webkit-flex-wrap:wrap;

flex-wrap: word wrap
nowrap: no
wrap wrap: wrap

2. Try not to use percentages for height

3. Do not use percentages for margin-top and margin-bottom. If actual needs require, use absolute positioning and relative positioning instead

4. If you don't know what tags to use, use div instead

5. If you need to be compatible with ie9 browsers, you must use float:left.

Float layout tutorial address: http://study.163.com/course/introduction.htm?courseId=1005118030

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324540180&siteId=291194637