视口理论

基本概念

屏幕尺寸

对角线的长度（英寸）

屏幕分辨率

横纵向上物理像素的个数 （物理像素）

屏幕密度

每英寸上物理像素的个数（决定高清屏还是普通屏）

视口尺寸

横纵向上css像素的个数

---

4个像素、3个视口、2个操作、1个比例

4个像素

物理像素

屏幕成像的最小单位，一个物理像素在不同设备上占据的面积是不一样的

css像素

web开发者使用的最小单位，一个css像素最终会转成物理像素。一个css像素到底占据多少个物理像素，跟屏幕的特性和用户的缩放行为有关。这里的屏幕的特性是指普通屏还是高清屏，实际上就是像素比。

        在不考虑用户缩放的情况下，

        没有viewport标签的时候，一个css像素到底占据多少个物理像素？要看这块屏幕横向上有多少个物理像素（屏幕的横向分辨率）和这块屏幕横向上有多少个css像素（视觉视口的横向尺寸）。视觉视口的横向尺寸与屏幕的横向分辨率的比值就是一个css像素占据物理像素的个数。

        有viewport的时候，像素比（物理像素和设备独立像素的比例），也是物理像素和css像素的比例。

        考虑用户缩放的时候：

        放大：css像素占据更多的物理像素

        缩小：css像素占据更少的物理像素

设备独立像素

设备对接css像素的接口，一旦css像素与设备独立像素挂上钩，像素比才能发挥作用。

(width="device-width")，否则像素比就不起作用。

位图像素

图片的最小单位，位图像素与物理像素一比一时，图片才能完美清晰的展示。

3个视口

布局视口

决定页面的布局

视觉视口

决定用户能看到什么。一个css像素占据多少个物理像素，和视觉视口有极大的关系。

一个视觉视口包含的物理像素的个数是固定的，就屏幕的分辨率、一个视觉视口包含的css像素的个数是不确定的，更用户的缩放行为有关。

理想视口

设备独立像素的值

2个操作

用户

只影响布局视口

系统

影响布局视口和视觉视口

放大：放大一个css像素的面积，视觉视口的尺寸变小，一个css像素占据的物理像素的个数变多

缩小：缩小一个css像素的面积，视觉视口的尺寸变大，一个css像素占据的物理像素的个数变少

像素比

官方定义：物理像素/设备独立像素

屏幕在一个方向物理像素的个数与同方向上设备独立像素的比值

当加上viewport标签之后，css像素与设备独立像素重合，像素比可以理解为屏幕物理像素与css像素的比值。

3个意外

1.太大的元素

使用完美视口解决太大的元素超过视觉视口后不出滚动条的问题

2.width和initial-scale的冲突

谁大听谁的

在移动端，能改变布局视口的尺寸的只有width和initial-scale，以及屏幕旋转切换。

3.等比问题

没有viewport的时候，等比，但是页面太小，字体太小

有viewport的时候，不等比。

每一个css像素在不同设备上占据的实际屏幕尺寸一样。但是每一个css像素在不同设备上占据的物理像素个数不一样。

由此引发了适配的问题。