day12-像素、视口、vw

像素

像素

---

屏幕是由一个一个发光的小点构成，这一个个的小点就是像素；
分辨率说的就是屏幕中小点的数量；
在前端开发中像素要分成两种情况讨论：CSS像素、物理像素；
物理像素： 上述所说的小点就是物理像素；
CSS像素： 编写网页时，我们所用的像素就是CSS像素；
-浏览器在显示网页时，需要将CSS像素转换为物理像素然后呈现；
-一个CSS像素最终由几个物理像素显示由浏览器决定；
默认情况下在PC端，一个CSS像素=一个物理像素；

手机像素

---

在不同的屏幕下单位像素的大小是不同的，像素越小屏幕会越清晰；
查分辨率；
智能手机的像素点远小于计算机的像素点；
默认情况下，移动端的网页都会将视口设置为980px（CSS像素），以确保PC端网页可以再移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页；
基本大部分的PC端网站都可以在移动端中正常浏览，但是往往用户都不会有一个好的体验，为解决这个问题，大部分网页都会专门为移动端设计；

视口

视口

---

就是屏幕中用来显示网页的区域；
可以通过查看视口来观察CSS像素和物理像素的比值；
默认情况下：
视口宽度 1920px（CSS像素）；1920px（物理像素）；此时CSS像素和物理像素的比值是1:1；
放大两倍情况下：
视口宽度 960px（CSS像素）；1920px（物理像素）；此时CSS像素和物理像素的比值是1:2；
可以通过改变视口的大小来改变CSS像素和物理像素；

完美视口

---

移动端默认的视口大小是980px（CSS像素）；
默认情况下，移动端的像素就是980/移动端宽度；
如果直接在网页中编写移动端代码，这样在980的视口下，像素比非常不好，导致网页中的内容非常的小；
编写移动端页面时，必须要确保有一个比较合适的像素比；
一个CSS像素对应一个物理像素；
可以通过meta标签来设置视口大小；
移动端：
<meta name="viewport" conent="width=200px，initial-scale=1.0">
每一款移动设备设计时，都会有一个最佳像素比，一般只需要将像素比设置该像素即可得到一个最佳效果，将像素比设置为最佳像素比的视口大小称为完美视口；

vw

vw单位

---

由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，所以在移动端开发时，就不能再使用PX来进行布局；
vw单位表示视口的宽度（viewport width）：
100vw=一个视口的宽度
1vw=1%
vw这个单位永远相对于视口宽度进行计算；

vw适配

1rem=1html的字体大小，设置了不一定生效，网页中字体大小最小是12px，不能设置一个比12像素还小的字体；