CSS里面的像素
像素又分为css像素和物理像素
css像素
就是我们在编写网页时用的像素就是css像素
物理像素
比如我的电脑分辨率是1920×1200，这就是物理像素
默认情况下，在pc端css与物理像素比是1:1
视口
viewport就是屏幕中用来显示网页的区域- 默认情况下1css px=1物理像素
- 放大两倍时，1css px= 2物理像素
手机视口宽度
移动的视口默认是980px（css像素）
- 使pc端可以在移动端访问，完整显示网页
- 所以大部分的pc端可以在移动端正常浏览，但体验不好
- 所以需要为移动端设计一个网页
所以编写移动端网页时，需要一个设置合理的像素比
- 通过meta设置视口大小
- 最佳的视口大小称为完美视口，由厂商给出
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
vw
%是相对于父元素或其他作为参考的
vw是永远相对于视口作为参考的
100vw=视口宽度
1vw=1%的视口宽度