像素 - pixel
屏幕是由一个个发光的小点点构成点，这一个个小点就是像素。
分辨率 ：1920 X 1080，就是表示屏幕中小点的数量。
再前端开发中要分两种情况讨论：
- CSS像素（编写网页 时使用的像素都属于CSS像素）
- 物理像素（上述说的小点点就是物理像素）
浏览器在显示网页时，需要先将CSS像素转换为物理像素。
一个CSS 像素最终由几个物理像素显示，由浏览器或系统等等决定。
默认情况下：一个CSS 像素 = 一个物理像素
视口 - viewport
视口就是屏幕中来显示网页的区域。
可以通过查看视口的大小，来观测CSS像素和物理像素的关系。
视口像素：1440 X 480
物理像素：2880 X 1880（截图工具量的都是物理像素）
我们可以通过改变视口的大小来改变CSS像素和物理像素的比值。
在不同的屏幕单位像素的大小是不同的，像素越小屏幕显示就会越清晰
24寸 1920 x 1080
4.7寸 750 x 1334
问题一
一个宽度为900px的网页一个在手机上（4.7寸 750 x 1334）如何显示。
答案是：900px宽的网页并不能占满整个手机的宽度。
默认情况下，移动端的网页都会将视口的设置为980px（css像素），以确保PC端网页可以在移动端正常访问。移动端的网页会对网页进行自动缩放以完整显示网页。
设置视口大小
可以通过meta 标签来设置视口大小
css
<meta name="viewport" content="width=400px">每一款移动设备都应该一个最佳像素比，只要设置为该值就会有一个最佳的效果。
完美视口
css
<meta name="viewport" content="width=device-width">