移动端特点
在网页布局上，PC 端网页与移动端网页不同，PC 端屏幕大，网页固定版心；手机 移动端 的屏幕小，网页宽度多数为 100% 。
可以用 谷歌模拟器 在电脑里边一边写代码，一边调试移动端的网页效果：
屏幕尺寸:
屏幕尺寸 指的是 屏幕对角线 的长度，一般用英寸来度量
分辨率
分辨率 有两种，物理分辨率和逻辑分辨率：
- 物理分辨率 是生产屏幕时就固定的，它是不可以被改变的，即出厂设置的硬件分辨率；
- 逻辑分辨率 是由软件（驱动）决定的，即软件设置的缩放调节的分辨率
我们制作网页参考的是 逻辑分辨率 ，下图是常用的分辨率比例关系：
视口
网页的宽度和逻辑分辨率的的尺寸相同
使用 meta 标签设置 视口宽度 ，制作适配不同设备宽度的网页。
默认情况下，网页的宽度和逻辑分辨率不同，默认网页的宽度是 980 px
如果要让 网页宽度 和设备宽度，即分辨率相同，可以添加 视口 标签，视口就是显示 HTML 网页的区域，用来约束 HTML 尺寸。
上述代码含义：
- viewport 视口
- width=device-width 视口宽度 = 设备宽度
- initial-scale=1.0 缩放 1 倍，即不缩放 1：1
移动端默认视口 980px ；PC 端默认视口与浏览器一样，100%。
百分比布局
使用百分比布局（也叫流式布局）开发网页，宽度可以 自适应 ，高度固定
