移动web第三天
全天目标
了解移动端与PC端屏幕和网页布局的差异，能够使用Flex布局模型布局移动端网页
设备的分辨率
移动端的开发中，经常遇到的一个问题： 设备的屏幕的大小的问题
经常遇到的第二个问题： 设备的分辨率的问题
当屏幕越来越大，每个屏幕里面放的像素点如果是固定不变的是会造成图像显示不够清晰的问题的，随着技术的不断发展，我们在本来应该显示一个小点的控件里面，放入更多的小点就可以让图像看起来更加清晰
—— 屏幕的成像原理
不同的移动设备具有不同的分辨率
不同的屏幕大小，能够展示的内容也不一样，但是在移动开发里面，不可能每个设备都会做一个网站来处理，所以我们有一个统一的单位来控制 ： 设备的像素比 —— 指的是 在一个 像素单位的控件里面，放了多少个用于显示的小点
实际的小点： 物理像素点
屏幕显示的大小： 屏幕像素点
二倍图
移动端里面，因为设备的分辨率和像素比的不同，历史里面出现过一个问题：
一张图片，在iphone3GS里面显示是清晰的，但是放到了iphone4里面，就变得模糊了
这个现象较图像的失真
图像失真就是因为，屏变大了，但是图像里面的像素点还是只有这么多，如果原本是图片里面有2个像素，在3gs里面用于2个点来显示就是正常的
放到了更大的屏幕里面转换，iphone4里面的像素是4个像素了，图片里面只有2个像素，放到4个像素里面显示，就是2个像素点显示图片的1个像素，就相当于把1个点拆成了两份，就会变得模糊
所以我们要解决这个问题：
以前的解决方案： 准备多个图片，如果是在1倍显示的屏幕下面，就使用1倍图，在2倍显示的图片下面，就显示2倍图
后来觉得这样做太麻烦了，所以我们现在分析所有的条件之后，发现，目前主流的屏幕基本都是2倍屏幕，我们就只准备一个2倍的图片，即使这张图片，放到1倍屏幕里面显示也不会模糊，所以我们一般在移动端里面，使用二倍的图片，当我们在1倍的屏幕里面，还是会清晰。
这就是为什么我们之前做的携程，使用一个 80宽的图片，做40宽的显示的原因
总结： 一般在移动端的开发里面，使用二倍图来作为显示 —— 目的是为了更加清晰，和兼容不同的屏幕大小
理想视口
给页面设置一个：理想视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1, minimun-scale=1,user-scalable=no" >
所有的移动端的开发，都会把这段代码加上。
这段代码，大家可以在任何时候都加上，因为在移动端需要它进行视口的自动适配，pc端会自动忽略这段代码。
这段代码的作用： 让视觉视口，和移动端的屏幕大小一致
解释一下这段代码：
name 属性 ，值是 ： viewport - 作用是告诉浏览器，要设置视口了
content 属性 ，值 ：
width=device-width 设置宽度为 设备宽度
initial-scale=1.0 设置初始的缩放为 1.0 倍
maximun-scale=1 设置最大的缩放比例 ： 1
minimun-scale=1, 设置最小的缩放比例： 1
user-scalable=no 是否允许用户手动缩放
\
百分比布局
目标
- 了解百分比布局方案 浮动+百分比(流式布局)
学习内容
-
特点
- 流式布局
- 宽度自适应，高度固定
-
布局方式
- 宽度为半分比写法
FLex布局
目标
- 使用Flex布局模型完成网页基本布局效果
学习内容
-
Flex的优势和特点
- 浏览器提倡的布局模型，页面渲染性能高
- 布局简单、方便
- 避免浮动脱标的问题
- 兼容性较高（不兼容低版本浏览器）
-
组成部分
- 弹性容器（父级， 添加display:flex的盒子）
- 弹性盒子（子级）
- 主轴（默认水平）
- 侧轴（默认垂直）
-
主侧轴对齐方式
-
主轴
-
justify-content
-
center：居中
-
space-between：间距出现在弹性盒子之间
-
space-evenly：父子级间距都相同
-
space-around：间距出现在弹性盒子两侧
- 视觉效果: 子级之间的间距是父级左右两侧间距的2倍
-
-
-
侧轴
-
align-items（控制所有弹性盒子）
- center：居中
- stretch：默认值， 拉伸
-
align-self（控制某个弹性盒子）
-
-
-
弹性伸缩比
- flex: 整数数字;
- 占用父级剩余尺寸的份数
