3、移动Web Flex布局
一、移动端特点
1、移动端和PC端网页不同点
思考：PC端网页和移动端网页的有什么不同？
（1）PC屏幕大，网页固定版心
（2）手机屏幕小， 网页宽度多数为100%
思考：如何在电脑里面边写代码边调试移动端网页效果？
谷歌模拟器
2、谷歌模拟器
思考：如何在电脑里面边写代码边调试移动端网页效果？
使用谷歌模拟器调试移动端网页
3、屏幕尺寸
屏幕尺寸指的是屏幕对角线的长度，一般用英寸来度量
4、分辨率
思考：制作网页参考物理分辨率还是逻辑分辨率？
逻辑分辨率
5、视口
移动端
目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
思考：默认情况下，网页的宽度和逻辑分辨率相同吗？
不同， 默认网页宽度是980px。
目标：网页宽度和设备宽度(分辨率)相同。
解决办法：添加视口标签。
视口：显示HTML网页的区域，用来约束HTML尺寸。
6、二倍图
目标：能够使用像素大厨软件测量二倍图中元素的尺寸
图片分辨率, 为了高分辨率下图片不会模糊失真
当设备像素比很大时，图片会被放大，而放大会让图片看起来模糊。为此，我们可以使用二倍图的方式来提高图片的清晰度。
在实际开发中，当一个50 ×50像素（CSS像素）的图片直接放到iPhone 6/7/8设备中显示时，图片会被放大，变成原来的两倍（iPhone 6/7/8的设备像素比为2），即100 ×100。为了避免图片放大后模糊，我们可以预先制作一张100 ×100的图片，然后在网页中手动设置这个图片的样式，将图片的宽和高都设为50像素。这样，这张图片就会以它原本的像素（100 ×100）来显示，保证了图片的原有清晰度。
二、百分比布局
目标： 能够使用百分比布局开发网页
百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定。
<title>京东</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.toolbar {
position: fixed;
left: 0;
bottom: 0;
/* 百分比布局 */
width: 100%;
height: 50px;
border-top: 1px solid #ccc;
}
.toolbar li{
float: left;
width: 20%;
height: 50px;
}
.toolbar li img {
height: 100%;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li>
<a href="#"><img src="./images/index.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/classify.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/jd.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/car.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/login.png" alt=""></a>
</li>
</ul>
</div>
</body>
三、Flex布局
目标： 能够使用Flex布局模型灵活、快速的开发网页
思考
（1）多个盒子横向排列使用什么属性？
浮动
（2）设置盒子间的间距使用什么属性？
margin
（3）需要注意什么问题？
浮动的盒子脱标
1、Flex布局
（1）Flex布局/弹性布局：
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
（2）移动端不用考虑兼容问题
PC端要考虑，可以在网站caniuse.com上查一下
(3)作用
a.基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
b.Flex布局非常适合结构化布局
(4)设置方式
父元素添加display: flex，子元素可以自动的挤压或拉伸
(5)组成部分
弹性容器(父级)
弹性盒子(子级)
主轴
侧轴 / 交叉轴
2、主轴对齐方式
目标：使用justify-content调节元素在主轴的对齐方式
（1）思考：网页中，盒子之间有距离吗？
l答：有。
（2）在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。
（3）修改主轴对齐方式属性: justify-content
.box {
display: flex;
/* 居中 */
justify-content: center;
/* 间距在弹性盒子（子级）之间 */
justify-content: space-between;
/* 所有地方的间距都相等 */
justify-content: space-evenly;
/* 间距加在子级两侧 */
/* 视觉效果：子级之间的距离是父级两头距离的两倍 */
justify-content: space-around;
height: 200px;
margin: auto;
border: 1px solid #000;
}
3、侧轴对齐方式
目标：使用align-items调节元素在侧轴的对齐方式
（1）修改侧轴对齐方式属性:
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* align-items: center; */
/* 拉伸，默认值（现有状态，测试的时候去掉子级的高度） */
/* align-items: stretch; */
height: 300px;
margin: auto;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
/* 单独设置某个弹性盒子的侧轴对齐方式 */
.box div:nth-child(2){
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
4、伸缩比
目标：使用flex属性修改弹性盒子伸缩比
（1）属性
flex : 值;
（2）取值分类
数值(整数)
注意 : 只占用父盒子剩余尺寸，数值是几，就把剩余部分分几份，占几分
.box div:nth-child(1) {
width: 50px;
}
/* 把剩余尺寸分四份 一个占三份，一个占一份 */
.box div:nth-child(2){
flex: 3;
}
.box div:nth-child(3){
flex: 1;
}
