移动端
移动端特点
移动端和PC端网页不同点
-
PC屏幕大，网页需要固定版心
-
手机屏幕小， 网页宽度多数为100%
谷歌模拟器
使用谷歌模拟器调试代码
分辨率
屏幕尺寸 ：指的是屏幕对角线的长度，一般用英寸来度量
PC分辨率： 1920 * 1080 1366 * 768 ……
缩放150% （1920/150%）*（1080/150%）
总结 ：
-
硬件分辨率（出厂设置）
-
缩放调节的分辨率（软件设置 ）
移动端主流设备分辨率 ：
-
物理分辨率是生产屏幕时就固定的，它是不可被改变的
-
逻辑分辨率是由软件（驱动）决定的
-
制作网页参考逻辑分辨率
-
-
PPI ：单位英寸内的物理像素点个数，值越大，屏幕越清晰
-
设备像素比 ：设备分辨率和逻辑分辨率的比例，可以理解为屏幕的清晰度的倍数（倍数越高越清晰）
二倍图
-
目标：能够使用像素大厨软件测量二倍图中元素的尺寸 图片分辨率, 为了高分辨率下图片不会模糊失真
-
1倍 2倍 3倍图 需要搞一套代码可以自动识别当前的屏幕清晰度 自动对应加载清晰的图片
解决方法：添加 srcset （但很少用，一般美工给什么图直接用就可以了，一般用二倍图）
视口
-
使用meta标签设置视口宽度，制作适配不同设备宽度的网页
-
手机屏幕尺寸都不同， 网页宽度为100%
-
网页的宽度和逻辑分辨率尺寸相同
-
默认情况下，网页的宽度和逻辑分辨率不同， 默认网页宽度是980px ，HTML默认980px
-
想让 网页宽度和设备宽度(分辨率)相同 ，办法添加视口标签
-
网页宽度和设备宽度(分辨率)相同
-
<mata name="viewport" content="width=device-width, initial-scale=1.0"> viewport：视口 width=device-width：视口宽度 = 设备宽度 initial-scale=1.0：缩放1倍（不缩放）
百分比布局（流式布局 ）
- 效果： 宽度自适应，高度固定
Flex布局 (重点)
设置方式
父项添加 display: flex，子项可以自动的挤压或拉伸
-
设置了flex的盒子称之为 父项
-
盒子里面的子元素称为 子项
-
弹性盒详解
-
弹性盒中的属性很多
-
添加到父级元素上的属性 控制所有子级元素的排列位置
-
添加到子级元素上的属性 控制单个子级元素的排列位置
-
具体变化
- 不再区分行内块，全部可以设置宽高。
- 宽度有内容撑开。
- 高度如果不设置默认等于父元素的高。
- 子项的float、clear和vertical-align属性将失效。
- 可以使用 定位、margin、transform
- 默认情况下子项总宽度大于父项的宽也不会换行，只会压缩自身的宽度
组成部分
- 弹性容器
- 弹性盒子
- 主轴
- 侧轴 / 交叉轴
使用flex布局的好处
- 是一种浏览器提倡的布局模型
- 可以简便、完整、响应式地实现各种页面布局
- 避免浮动脱标的问题
- 任何容器都可以指定为Flex布局， 行内元素也可以使用Flex布局。
主轴对齐 justify-content
调节主轴或侧轴的对齐方式来设置盒子之间的间距
| 属性值 | 作用 |
|---|---|
| flex-start（默认值） | 左对齐，在起点依次排列 |
| flex-end | 右对齐，在终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在**弹性盒子两侧 |
| space-between | **两端对齐，弹性盒子之间的空白间隔都相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间的间距相等 |
主轴的方向 flex-direction
| 属性值 | 含义 |
|---|---|
| row（默认值） | 主轴为水平方向，起点在左端. 从左到右 |
| row-reverse | 主轴为水平方向，起点在右端. 从右到左 |
| column（常用） | 主轴为垂直方向，起点在上沿. 从上到下 |
| column-reverse | 主轴为垂直方向，起点在下沿. 从下到上 |
侧轴对齐 都添加到弹性容器
侧轴单行对齐 align-items
只有当子元素没有高度时，才会有拉伸效果（否则以设置的高度为准）
| 侧轴单行对齐（align-items） | 作用 |
|---|---|
| flex-start | 向侧轴的开始位置对齐** |
| flex-end | 向侧轴的结束位置对齐** |
| center | 居中对齐** |
| stretch | 让子盒子的高度拉伸显示（默认值） |
侧轴多行对齐 align-content
取值（和align-items差不多）
行与行之间的间距
| 多行对齐方式：align-content | 含义 |
|---|---|
| flex-start | 向侧轴的开始位置对齐 |
| flex-end | 向侧轴的结束位置对齐 |
| center | 居中对齐 |
| stretch | 子元素高度拉伸显示（没有设置高度才有效果） |
| space-around | 空白环绕盒子显示 |
| space-between | 空白只在盒子之间显示 |
属性定义了多根轴线（侧轴多行对齐方式）的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-items 和 align-content区别
如果子元素没有换行，只有一行的时候使用 align-items
如果子元素有多行，此时使用 align-content
align-items拓展
-
基线对齐 baseline
-
当子级元素都设置宽高大小。设置baseline和flex-start效果一样
-
基线对齐：文本元素 文本大小虽然不一样 但是都在基线上对其显示
换行 flex-wrap
换行属性添加在父项
属性定义，如果一条轴线排不下，如何换行
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
flex-flow
属性是flex-direction属性和flex-wrap属性的简写，默认值为row nowrap
伸缩比（分配子元素空间）
-
使用flex属性修改弹性盒子伸缩比
-
flex : 值（占的份数） ；
-
取值分类 : 数值(整数)
-
优先分配具体的宽度，剩余的空间再按照分数分配。
子元素排序（order属性）
-
在不能修改html结构的时候，要求改变子元素的属性，此时可以使用order属性设置
-
需求： 让弹性盒子中第二个子元素显示在左边第一个？？
-
作用： 设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认是0
-
代码： order: 数字;
单个子元素侧轴对齐方式：align-self
添加到弹性盒子 控制某个弹性盒子在侧轴的对齐方式
| 取值 | 效果 |
|---|---|
| flex-start | 向侧轴的开始位置对齐（默认相当于顶部对齐） |
| flex-end | 向侧轴的结束位置对齐（默认相当于底部对齐） |
| center | 居中对齐 |
| stretch | 子元素高度拉伸显示（只有没设高才有效果） |
flex布局的子项盒子居中
flex布局子项盒子居中
.box {
display: flex;
width: 400px;
height: 400px;
background-color: skyblue;
margin: 100px auto;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
span {
width: 100px;
height: 100px;
background-color: pink;
}
/* <div class="box">
<span></span>
</div> 让子项span盒子居中 */
效果图：
flex-flow
属性是flex-direction属性和flex-wrap属性的简写，默认值为row nowrap
拓展知识总结
-
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
-
采用Flex布局的元素，称为Flex容器（flex container）（父项），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
-
Webkit内核的浏览器，必须加上-webkit前缀。
实战演练
- 块级元素使用了定位（绝对和固定） 宽度变成由内容撑开。立刻安排宽度100%。
- 去掉i标签斜体 font-style:normal
