像素、视口、vw 简介

像素： 物理像素   屏幕中的小点（显示屏上的小点）

　　　 css像素    编写网页时，我们所用的像素

            例如  div{　　

　　　　　　　　width:100px； 100px为css像素

　　　　　　　　}

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

　　一个CSS像素由几个物理像素显示，由浏览器决定。

　　　　　默认情况下，在PC端一个CSS像素==（等于）一个物理像素

视口(viewport): 屏幕中用来显示网页的区域。

　　　　　　　改变视口的大小，可以改变物理像素与CSS像素的比例

  　　　　　　 可以通过meta标签来设置视口的大小

　　　　　　　<meta  name="viewport" content="width=device-width,initial-scale=1.0">

　　　　　　　name对应的值为视口     宽度为 变量device-width 设备的完美视口宽度(对应不同设备，视图窗口会设置不同的值)

移动端开发，不在使用px进行布局。而使用VW(viewport的缩写)

　　vw表示视口的宽度

      100vw == 100%视口宽度

　　1vw ==1%视口宽度

 备注：网页中字体最小为12px,不能设置一个比12px还小的字体。