移动端的布局

流式布局

只管宽度，不管高度

flex布局

父元素属性

flex-direction 设置主轴的方向

flex-direction: row;  //从左到右排列
flex-direction: row-reverse;  //从右到左
flex-direction: column; //从上到下
flex-direction: column-reverse;  //从下到上

**justify-content**设置主轴上的元素排列方式

使用之前必须确定好主轴的方向

属性值	作用
flex-start	默认值 从头部开始 如果是x轴，则从左到右
flex-end	从尾部开始
center	在主轴上居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

**flex-wrap**设置子元素是否换行

特点：flex布局中，子元素默认是不会换行的，而是压缩盒子大小

flex-wrap: wrap;  //换行

**align-items**设置侧轴上的子元素排列方式（单行）

控制子项在侧轴（默认是y轴）上的排列方式，在子项为1单项（单行）的时候使用

属性值	作用
flex-start	从上而下
flex-end	从下而上
center	挤在一起居中
stretch	拉伸（默认值）

**align-content**设置侧轴上的子元素排列方式（多行）

属性值	作用
flex-start	默认值，从侧轴的头部开始排列
flex-end	从侧轴的尾部开始排列
center	在侧轴上居中显示
space-around	子项子侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余的空间
stretch	拉伸（默认值）

**flex-flow**是flex-direction和flex-wrap的结合

flex-flow: row wrap;

子元素属性

flex子项目占用的份数

align-self控制子项自己在侧轴上的排列方式

align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto, 表示继承父元素的align-items属性，如果没有父元素等同于stretch。

order属性定义子项的排列顺序

数值越小，排列越靠前，默认为0。

rem布局

em和rem

em:是相对于父元素的字体大小来改变的。

rem:是相对于html元素的字体大小来改变的。

媒体查询

@media mediatype and|not|only (media feature) {
   CSS-Code;
}

mediatype(媒体类型): all , print (打印机) ，screen（手机电脑和ipad屏幕）

元素取值算法

1.页面元素的rem值=页面元素值(px）/(屏幕宽度/划分的份数)

2.屏幕宽度/划分的份数就是html中 font-size的值

3.页面元素的rem值=页面元素值（px）/html font-size 字体大小

vw,vh布局

vw,vh为视口布局，vw为视口的宽度，vh为视口的高度。

1vw为视口宽度的100分之一

1vh为视口高度的100分之一

查看属性的兼容： https://caniuse.com

常用的效果插件：

swiper https://www.swiper.com.cn/

SuperSlide http://www.superslide2.com/

isScroll http://caibaojian.com/iscroll-5/gettingstart.html

视频样式统一个插件：zy.media.js

https://github.com/ireaderlab/zyMedia

fastclick.js

清楚移动端默认的点击300ms延迟。

https://github.com/ftlabs/fastclick