基本概念
屏幕尺寸
对角线的长度（英寸）
屏幕分辨率
横纵向上物理像素的个数 （物理像素）
屏幕密度
每英寸上物理像素的个数（决定高清屏还是普通屏）
视口尺寸
横纵向上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.太大的元素
使用完美视口解决太大的元素超过视觉视口后不出滚动条的问题
<meta name="viewport" content="width=device-width, initial-scale=1.0 ,maximum-scale=1.0 minimum-scale=1.0, user-scalable=no" />
2.width和initial-scale的冲突
谁大听谁的
在移动端，能改变布局视口的尺寸的只有width和initial-scale，以及屏幕旋转切换。
3.等比问题
没有viewport的时候，等比，但是页面太小，字体太小
有viewport的时候，不等比。
每一个css像素在不同设备上占据的实际屏幕尺寸一样。但是每一个css像素在不同设备上占据的物理像素个数不一样。
由此引发了适配的问题。
网友评论