1、布局视口,为了把网页在手机上显示,先创建一个虚拟的页面(布局视口),把页面显示出来,这个视口一般设为960宽度(或者更高),然后根据不用的手机,进行相应的缩放,这样就可以把一个页面显示在手机上(缩放不会改变它的大小)
2、可视视口 默认宽度是手机的宽度,也就是手机屏幕设备的宽度
页面在手机上显示的区域(用户的缩放会改变它的大小)
3、理想视口
就是布局视口在一个设备上的最佳尺寸
便于浏览器浏览、阅读
为什么要有理想视口?
布局视口默认960宽度,甚至更宽,可视视口默认和手机设备的宽度一样,这种情况下,在手机上浏览网页,就需要滑动页面来观看网页,所以提出了理想视口
如何使用:
在页面添加下面这段话
viewport视口
<meta name="viewport" content="width=device-width" />
width=device-width 布局视口就变成了理想视口,宽度和手机设备的宽度一样
设置了上面这段话后,俩个视图就一样大了,消除了它们的差异,这样用户使用的时候,就不用进行缩放了