H5移动端介绍

一 移动端布局规则
1.固定布局 静态页面(设置固定的px)
2.流式布局 高设置固定值,宽为百分比,例用media
3.Flex box布局 弹性盒子
4.响应式布局 less/sass rem media
5.Bootstrap 框架布局

二 viewport头部设置声明

1.打开移动端的视图, 如果不设置viewport移动端的宽度默认为980
2.Css中的1px并不等于设备的1px
window.devicePixelRatio 用于查看设置的DPR, 设置物理像素与独立像素的比例

3.三个常用的viewport声明
1)layout viewport 布局
2)visual viewport 浏览
3) ideal viewport 完美

三 flew box 弹性盒子

一)Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

Container 容器
main axis 水平轴 x轴
Main start 水平轴开始
Main end 水平轴结束

Cross axis 交叉轴 y轴
Cross start 交叉轴开始
Cross end 交叉轴结束

item 项目