视口的总结

视口：
    上面的虚拟容器就叫视口。

为什么是980？
    很早之前，电脑的分辨率比较低，写一个电脑端的网站都是980px。
    为了让980px的网站可以在手机完美显示出来，人为地把这个虚拟容器的宽度定了980px。
    
iphone6/7/8宽度是375
iphone5宽度是320
iphone6/7/8plus它的宽度是414

    上面的320px  375px   414px，指的是手机的宽度（设备独立像素，和我们手机的分辨率不是一回事）

    在真实开发中，通常会以iphone6作为标准。  
在开发时，我们就以手机宽度为主。
-------------------------------------------
物理像素：
    指的是手机或电脑屏上的发光点。叫物理分辨率，也叫物理像素。
    如：iphone6的分辨率1334*750 
    在水平方向上有750个发光点，在垂直方向上有1334个发光点。

    在开发时，不关心物理像素 

逻辑像素：
    在写CSS代码时，写的像素叫逻辑像素，如：.box{width:100px,height:100px;}

在电脑端：1个逻辑像素 等于 1个物理像素
但是在手机端就不一样了。

-------------------------------------------
写一个盒子：
    200*200盒子。
    在PC端：逻辑像素和物理像素一一对应 
    在iphone6/7/8plus上：1)盒子先放到虚拟容器（980px）中 然后压缩放到414的手机中
    在iphone6/7/8上：1)盒子先放到虚拟容器（980px）中 然后压缩放到375的手机中
    在iphone5上：1)盒子先放到虚拟容器（980px）中 然后压缩放到320的手机中

    同一个盒子在不同的手机中，大小是不一样的。
-------------------------------------------
同一个盒子在不同的手机中，显示的大小，取决于手机的分辨率，正确吗？
答：不正确  取决于手机的宽度，这个宽度叫设备独立像素。

-------------------------------------------
以iphone6为例：
    分辨率是：1334*750   在水平方向上有750个发光点，在垂直方向上有1334个发光点。
    设备独立像素：375*667

    就是水平方向来说：
        分辨率：750   有750个发光点
        设备独立像素：375    

    像素是一块一块：1*1的像素块

    结论：在iphone6上，1设备独立像素块，最终映射到手机的上，可以映射4个发光点。
-------------------------------------------
如果不让盒子压缩?
    答：为了不让盒子放到手里被压缩，可以设置这个虚拟容器的宽度。

如：
    200*200盒子。
    人为设置虚拟容器是的宽度是414。  
    1）200*200的盒子放到414的盒子，肯定可以放下
    2）414的虚拟容器放到414的手机中就不会压缩。

结论：如果不想让盒子被压缩，你需要设置虚拟容器的大小。如果设置成和手机的宽度一样的，这样，这个盒子在所有的手机都不会压缩了。

最终的结论：只要我们去写手机端的页面，必须要设置视口大小。