1.视口概念
描述：视口就是视图窗口的简称，页面中视口大小实际上就是HTML元素的显示大小。
说明：页面想要在移动端加载必须进行视口的适配，如果不对页面进行调整 ，那么默认页面在移动端加载的时候，都认为页面视口宽度为980px。
为什么是980？
很早之前，电脑的分辨率比较低，写一个电脑端的网站都是980px。
为了让980px的网站可以在手机完美显示出来，人为地把这个虚拟容器的宽度定了980px。
iphone6/7/8宽度是375
iphone5宽度是320
iphone6/7/8plus它的宽度是414
上面的320px 375px 414px，指的是手机的宽度（设备独立像素，和我们手机的分辨率不是一回事）
在真实开发中，通常会以iphone6作为标准。
在开发时，我们就以手机宽度为主。
视口（viewport）是用来约束网站中最顶级块元素<html> 的，即它决定了<html>的大小
在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素做为度量单位。
2.设置视口
样例：
3.PC端到手机端
1）把电脑端的网站放到虚拟容器中，这个虚拟容器的宽度是980px，这个980是人为规定的，手机在出厂时就设置好了。
2）第二步，就是把这个虚拟容器放到手机里
4.盒子
写一个盒子：
200*200盒子。
在PC端：逻辑像素和物理像素一一对应 同一个盒子在不同的手机中，大小是不一样的。
如果不想让盒子被压缩，你需要设置虚拟容器的大小。如果设置成和手机的宽度一样的，这样，这个盒子在所有的手机都不会压缩了。
结论：只要我们去写手机端的页面，必须要设置视口大小。
782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
