html:
    <!—
    像系:
    屏幕是由一个一个发光的小点构成，这一一个个的小点就是像素
    分辨率: 1920 x 1080说的就是屏幕中小点的数量
    在前端开发中像素要分成两种情祝讨论:CSS像素和物理像素
    物理像素，上述所说的小点点就属于物理像素
    CSS像素，编写网页时，我们所用像素都是cSS像素
    浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
    一个css像素 最终由几个物理像素显示，由浏览器决定:
    默认情况下在pc端，一个css像素 = -个物理像素
    视口(viewport)
    视口就是屏幕中用来显示网页的区域
    可以通过查看视口的大小，来观察CSS像素和物理像素的比值
    默认情况下:
    视口宽度1920px (CSS像素)
    1920px (物理像素)
    此时，css像素 和物理像素的比是1:1
    放大两倍的情况:
    视口宽度96θpx (CSS像素)
    1920px (物理像素)
    此时，css像素和物理像素的比是1:2
    我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值