页面布局

移动端常用的布局:
1.流式布局
2.伸缩盒布局(弹性布局)flex
3.响应式布局  媒体查询(在超小屏时,也是使用的流式布局)
共同点:元素只能做宽度上的适配
实现宽度和高度都能做到的适配(等比缩放)适配
通过rem布局--将页面中px单位都转换成rem单位
em:是相对单位,相对于body的字体大小 1em=body设置字体px
rem:相对单位 r+em:r:root根 相对于HTML设置字体大小
计算rem的基准值:
rem的基准值:预设的基准值/设计稿的高度*当前设备的宽度
伸缩盒子布局包含四个部分:父元素 子元素  X轴 Y轴
space-around:水平方向分布排列,子元素与父容器直接的距离是子元素与父元素距离的一半 space-between
给父容器添加伸缩布局display: flex（有浮动的效果）
设置水平轴排序方式：justify-content：flex-start（类似左浮动）   flex-end （类似右浮动）  center （居中） space-around   space-between   
设置垂直轴的排序方式：align-items：flex-start  flex-end   center   baseline
设置子元素水平排列还是垂直排列   flex-direction ：row  row-reverse   column  column-resever
设置子元素换行：flex-wrap：wrap；
 设置子元素宽度 flex：数值（切成几份）
Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 
推荐学习网站:https://www.html.cn/doc/zeptojs_api/
Swiper常用于移动端网站的内容触摸滑动
推荐学习网站:https://www.swiper.com.cn/