移动端像素和视口基础知识点

---

像素

物理像素

整个屏幕是由一个个点组成的，每个屏幕上的点一定是有限的，现在的技术还做不到无穷个点组成屏幕。那么这些有限的点就叫做像素，或者叫做物理像素

分辨率

每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率。屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细。

逻辑像素

逻辑像素也叫css像素，是实际开发中使用的像素。css 代码在浏览中运行时，浏览器根据当前设备屏幕情况，自己选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与。

设备像素比

设备像素比（dpr）指的是同一方向上，设备像素比css像素的比值。

缩放

物理像素是不能改变大小的，缩放就是改变1css 像素等于多少个物理像素。

放大

原来1个css像素=1个物理像素，放大2倍，就是让1个css像素的宽和高都放大2倍，所以放大2倍后，1个css像素就占用了4个像素，1个css像素=2x2个物理像素。

缩小

原来1个css像素=1个物理像素，缩小到1/2后，1个css像素的宽和高都缩小到原来的1/2，所以缩小后，4个css像素才等于1个css像素。

ppi

ppi表示每英寸的物理像素点，ppi屏越大，屏幕上的像素点越密集，则显示就越精细，所以 ppi 是一个屏幕显示效果的重要参数。
PPI 的计算方法：

视口

视口是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。

布局视口

网页页面的宽度称为布局视口layout viewport

视觉视口

用户能直接看到的网站区域称为视觉视口visual viewport

理想视口

理想视口就是将布局视口的宽度修改为视觉视口，需要设置 meta 标签进行设置