1.移动端特点
PC端网页和移动端网页的有什么不同？
PC屏幕大，网页固定版心
手机屏幕小， 网页宽度多数为100%
如何在电脑里面边写代码边调试移动端网页效果？
谷歌模拟器
分辨率
物理分辨率是生产屏幕时就固定的，它是不可被改变的、 逻辑分辨率是由软件（驱动）决定的
硬件分辨率（出厂设置）
缩放调节的分辨率（软件设置）
制作网页参考逻辑分辨率
视口
显示Html网页的区域，用来约束Html尺寸（！自动生成）
理想视口标签：meta:vp
width=device-width ---- 设备的宽度和视口(页面)宽度相等
initial-scale=1.0 ---- 表示现在写多少像素，在页面之中就展示多少像素，不缩放
minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用户缩放页面，防止页面布局被打乱
meta标签设置视口宽度，制作不同设备宽度的网页
- 手机屏幕尺寸不同，网页宽度为100%
- 网页的宽度和逻辑分辨率尺寸相同
2.二倍图
使用Pxcook测量二倍图中元素的尺寸
现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿
二倍图设计稿尺寸：750px
3.百分比布局 （也叫流式布局）
效果： 宽度自适应，高度固定
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: skyblue;
}
a {
float: left;
width: 20%;
height: 50px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<footer>
<a href=""><img src="./images/1.png" alt="" /></a
><a href=""><img src="./images/2.png" alt="" /></a
><a href=""><img src="./images/3.png" alt="" /></a
><a href=""><img src="./images/4.png" alt="" /></a
><a href=""><img src="./images/5.png" alt="" /></a>
</footer>
4.Flex布局（非常重要）
概念：Flex布局/弹性布局： 一种浏览器提倡的布局模型 布局网页更简单、更灵活 避免浮动脱标的问题
目的：灵活、快速的开发网页
作用： 1.避免浮动布局中脱离文档流现象发生 2.Flex布局非常适合结构化布局
设置方式： 父元素添加display:flex，子元素可以自动的挤压或拉伸
组成部分： 弹性容器 弹性盒子 主轴 侧轴/交叉轴
说明：
1.添加了df的这个盒子，叫做弹性容器
特点：
默宽度就是父元素的宽度，高度由内容所撑开
弹性盒子：就是弹性容器的最近一级子元素
2. 弹性盒子：就是弹性容器的最近一级子元素
特点：
1.默认宽度由内容所撑开，默认的高度和父元素一样高；
2.弹性盒子没有块级元素，行内块元素，行内元素之分，统统叫做弹性盒子，弹性盒子可以设置宽高;
3.弹性盒子默认不会换行，会沿着主轴方向一行显示；
4.要注意弹性盒子的概念
主轴方向的对齐方式
也是给弹性容器添加
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距
语法：修改主轴对齐方式属性: justify-content：属性；
*/
/* jc flex-start: 从左边开始显示，默认值*/
justify-content: flex-start;
/* flex-end：从右边开始显示 */
justify-content: flex-end;
/* jcc center：在主轴上居中显示 */
justify-content: center;
/* jcsad space-around:将空白空间均分之后，环绕在弹性盒子的两侧---第一个和最后一个弹性盒子与弹性容器之间的距离是弹性盒子与弹性盒子之间的距离的1/2 */
justify-content: space-around;
/* jcsb space-between：空白空间会均分，然后存在于弹性盒子与弹性盒子之间，第一个和最后一个弹性盒子与弹性容器没有距离*/
justify-content: space-between;
/* space-evenly:弹性盒子和弹性盒子之间的距离等于第一个和最后一个弹性盒子与弹性容器之间的距离 */
justify-content: space-evenly;
侧轴对齐方式
语法： align-items：属性；
align-self：属性； 属性值和ai一样的 as是给需要单独控制侧轴方向对齐方式的弹性盒子添加
/* 默认值 */
align-items: flex-start;
/* flex-end:结束的地方，下面显示 */
align-items: flex-end;
/* center：垂直居中 aic */
align-items: center;
/* stretch：拉伸(默认值)到弹性盒子与弹性容器高度一样 */
align-items: stretch;
改变主轴方向：flex-direction
主轴默认是水平方向，侧轴默认是垂直方向
修改主轴方向属性 flex-direction
flex-direction：row
行，水平（默认值）
flex-direction:colum 这个值作用：主轴方向变为垂直，侧轴方向变为水平 注意点：现在主轴和侧轴仅仅只是方向调换了而已，主轴依然还是用jc改变对其方式，侧轴还是用ai改变对齐方式
reverse表示反向（不常用）
row-reverse 行, 从右向左
column-reverse列, 从下向上
lex伸缩比
给弹性盒子添加
语法： flex：值（整数）例如flex: 1;
1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
2.（常用）其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度
实现弹性容器里元素水平垂直居中方法
display: flex;
/* jcc 水平居中 */
justify-content: center;
/* aic 垂直居中 */
align-items: center;
弹性盒子换行
弹性盒子换行显示
语法：flex-wrap:wrap
调整侧轴多行对齐方式：align-content 取值与justify-content相同
ps:使用多行对齐方式必须要有换行后的前提条件flex-wrap:wrap
