视口简单介绍

视口的概念

描述：视口就是视图窗口的简称，页面中视口大小实际上就是HTML元素的显示大小。
说明：页面想要在移动端加载必须进行视口的适配，如果不对页面进行调整 ，那么默认页面在移动端加载的时候，都认为页面视口宽度为980px。

视口如何设置

**<meta name="viewport" content="width=device-width">
    <!-- device-width 是当前手机的设备独立像素,也是手机的宽度 -->
     <!-- <meta name="viewport" content="width=400"> -->
    <!-- 也可以自己设置宽度，超过这个虚拟容器宽度的会被压缩 -->**

视口作用

设置视口可以让我们做的盒子在不同手机上展现的效果相同，不会因为手机的设备独立像素不同而产生不同的效果。
例如：