如果把一个PC端的网站放到手机端，整体会被缩小，为什么？
答：把PC端的网站放到手机端，分两步：
1）把电脑端的网站放到虚拟容器中，这个虚拟容器的宽度是980px，这个980是人为规定的，手机在出厂时就设置好了。
如果电脑端的网站整体的宽度也是980px，就会正好放到这个虚拟容器。
如果电脑端的网站宽度大于980px，你的网站在这个虚拟容器中就会产生一个水平滚动条。
如果电脑端的网站宽度小于980px，这个虚拟容器也可以放下。
2）第二步，就是把这个虚拟容器放到手机里
如果手机的宽度也是980，正好把这个虚拟容器放下。
不幸的是，手机的宽度在出厂时，也是设置死的。如：iphone6/7/8宽度是375
如果iphone5宽度是320，如iphone6/7/8plus它的宽度是414.... 安卓手机在
出厂时，也规定死了一个宽度，你自己可以去查一下，你手机的宽度。
你要把一个980的虚拟容器放到一个300 400 500左右的手机里，会怎么样？
答：此时，这个虚拟容器就会被压缩，页面上的每一个盒子也会被压缩。
-------------------------------------------
视口：
上面的虚拟容器就叫视口。
为什么是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。 <meta name="viewport" content="width=414">
1）200*200的盒子放到414的盒子，肯定可以放下
2）414的虚拟容器放到414的手机中就不会压缩。
结论：如果不想让盒子被压缩，你需要设置虚拟容器的大小。如果设置成和手机的宽度一样的，这样，这个盒子在所有的手机都不会压缩了。