媒体查询

1、布局视口，为了把网页在手机上显示，先创建一个虚拟的页面（布局视口），把页面显示出来，这个视口一般设为960宽度（或者更高），然后根据不用的手机，进行相应的缩放，这样就可以把一个页面显示在手机上（缩放不会改变它的大小）

2、可视视口  默认宽度是手机的宽度，也就是手机屏幕设备的宽度

页面在手机上显示的区域（用户的缩放会改变它的大小）

3、理想视口

就是布局视口在一个设备上的最佳尺寸

便于浏览器浏览、阅读

为什么要有理想视口？

布局视口默认960宽度，甚至更宽，可视视口默认和手机设备的宽度一样，这种情况下，在手机上浏览网页，就需要滑动页面来观看网页，所以提出了理想视口

如何使用：

在页面添加下面这段话

viewport视口

<meta name="viewport" content="width=device-width" />

width=device-width  布局视口就变成了理想视口，宽度和手机设备的宽度一样

 

设置了上面这段话后，俩个视图就一样大了，消除了它们的差异，这样用户使用的时候，就不用进行缩放了