像素: 物理像素 屏幕中的小点(显示屏上的小点)
css像素 编写网页时,我们所用的像素
例如 div{
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还小的字体。