移动端布局和响应式布局了解上

啊啊啊，我写了好久的东西被我没保存下来直接没了我快。。。！！！！我好烦人，我写了一个多小时。就是移动端布局上那个。😭😭😭移动端布局几种方法：

1. 流式布局(百分比布局)：
   ①先设置body的min-width和max-width
   ②把每一个最大的那个父元素宽度设置为百分比(即所有元素的宽度设置为百分比，高度定死)
   ③图片的宽度一定要设置为100%,让它的高度自适应
   ④有的时候两个盒子的宽度都设置为50%，但是屏幕伸缩的时候会把另外的盒子挤下来，因为可能设置了padding值，margin值或者border所以屏幕伸缩就会宽度不够了。
   ⑤所以C3提供了特殊的盒子模型：
   box-sizing:border-box内容包含了：padding,border和内容
   ⑥margin值可以定位百分比也可以定死看实际情况

2. flex弹性布局：
   先设置body的min-width和max-width布局
   原理：通过给父元素添加flex的属性，来控制子元素的位置和排列方式。任何盒子都可以设置flex属性，当我们父元素设置了flex属性后，子元素的float和vertical-align都会失效。
   父项属性：
   ①flex-direction设置主轴方向,默认为x轴方向
   属性值：
   row
   row-reverse
   column
   column-reverse
   ②flex-wrap设置子元素是否换行，默认为不换行，如果父元素的长度不够，会缩小子元素
   属性值：
   wrap
   nowrap
   ③jus