自适应网页设计

自适应网页设计原则
Always add the viewport tag;
Use relateive units like %, em, rem, vh, vw;
use max-with, min-width;
use tools like flexbox
use media queires

Flexbox:

justify-content： 沿横轴对齐flex项;
align-items： 沿着纵轴对齐flex项
flex-direction： 定义项目放置在容器中的方向，并接受以下值：
**row：**项目与文本方向相同。
row-reverse：项目与文本方向相对。
**column：**项目从上到下放置。
column-reverse：项目从下到上放置。
order: Sometimes reversing the row or column order of a container is not enough. In these cases, we can apply the order property to individual items. By default, items have a value of 0, but we can use this property to set it to a positive or negative integer value.
align-self: This property accepts the same values as align-items and its value for the specific item.
flex-wrap: accepts the following values:
nowrap: Every item is fit to a single line.
wrap: Items wrap around to additional lines.
wrap-reverse: Items wrap around to additional lines in reverse.
flex-flow: The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of one of the two properties separated by a space.
For example, you can use flex-flow: row wrap to set rows and wrap them.
align-content align-content确定了行之间的间距，而align-items确定了整个项目在容器中的对齐方式。当只有一行时，align-content无效。

当flex方向为列时，justify-content更改为vertical，并将align-items更改为horizo​​ntal.

Media Query 举例：

/* mobile */
    @media screen and (max-width: 500px) {
        body {
            background-color:lightblue;
            flex-direction: column;

        }
    }
    /* tablet */
    @media screen and (min-width:501px ) and (max-width: 900px) {
        body {
            background-color:red
        }