前端——移动web

#博学谷IT学习技术支持#

一、移动端特点 

（一）移动端和PC端网页不同点

1、PC屏幕大，网页固定版心

2、手机屏幕小， 网页宽度多数为100%

（二）谷歌模拟器 ：使用谷歌模拟器调试移动端网页（F12）

（三）分辨率

1、屏幕尺寸 ：指的是屏幕对角线的长度，一般用英寸来度量

2、PC分辨率

1. 1920 * 1080
2. 1366 * 768
3. ……

3、缩放150%

1. （1920/150%）*（1080/150%）

4、总结

1. 硬件分辨率（出厂设置）
2. 缩放调节的分辨率（软件设置）

5、分辨率分类

1. 物理分辨率是生产屏幕时就固定的，它是不可被改变的
2. 逻辑分辨率是由软件（驱动）决定的

（四）视口

1、目标：网页宽度和设备宽度(分辨率)相同。

2、解决办法：添加视口标签。

3、视口：显示HTML网页的区域，用来约束HTML尺寸。

（五）二倍图

能够使用像素大厨软件测量二倍图中元素的尺寸

二、百分比布局

1、百分比布局， 也叫流式布局

2、效果： 宽度自适应，高度固定。

三、Flex布局 

1、Flex布局/弹性布局：

1. 是一种浏览器提倡的布局模型
2. 布局网页更简单、灵活
3. 避免浮动脱标的问题

2、作用

1. 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
2. Flex布局非常适合结构化布局

3、设置方式

1. 父元素添加 display: flex，子元素可以自动的挤压或拉伸

4、组成部分

1. 弹性容器
2. 弹性盒子

（一）主轴（使用justify-content调节元素在主轴的对齐方式） 作用

flex-start ——默认值, 起点开始依次排列

flex-end ——终点开始依次排列

center ——沿主轴居中排列

space-around ——弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧

space-between ——弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间

space-evenly ——弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

（二）侧轴 / 交叉轴（使用align-items调节元素在侧轴的对齐方式)

修改侧轴对齐方式属性:

align-items（添加到弹性容器）

align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

flex-start—— 默认值, 起点开始依次排列

flex-end ——终点开始依次排列

center ——沿侧轴居中排列

stretch ——默认值, 弹性盒子沿着主轴线被拉伸至铺满容器

• 总结

今天的复习就到这里哦，每周的复习也是对知识的巩固，学习也是个不断巩固的过程。大家一起加油学习哦，期待下次的分享呀！