像素简介

1.基本概念

像素

屏幕是由一个一个发光的小点构成，这一个个小点就是像素

分辨率：1920 x 1080 说的就是屏幕中小点的数量

在前端开发中像素分成两种情况讨论，css像素和物理像素

• 物理像素，上述所说的小点点就属于物理像素，凡是截图工具量出来的都是物理像素。
• css像素，编写网页时我们所用的像素就是css像素

浏览器在显示网页时，需要将css像素转化为物理像素后再呈现

• 一个css像素最终由几个物理像素呈现，由浏览器决定；
• 默认情况下pc端，一个css像素 = 一个物理像素 1:1

视口（viewport）

视口就是屏幕中用来显示网页的区域

可以通过查看视口的大小，来观察css像素和物理像素的比值

默认情况下：

视口宽度 1920px（css像素）

     1920px（物理像素）

     此时，css像素和物理像素的比值为1:1

放大两倍的情况：

视口宽度 960px（css像素）

     1920px（物理像素）

     此时，css像素和物理像素的比值为1:2

我们可以同构改变视口的大小，来改变css像素和物理像素比值