简单理解viewport

视口

  在桌面浏览器时代，只有一个视口，就是浏览器放置内容的区域，后来步入了移动时代，由于手机的分辨率很小，有的  只有320像素，而桌面端的网页布局宽一般都在960像素左右，960像素的页面放入320像素的容器中就会显得特别的  丑，页面并不能完整的显示出来必须通过滑动来观看整个页面，体验非常的不好，为了解决这个问题出现了三个视口的  概念：布局视口、可视视口、理想视口

布局视口

布局视口就是页面的宽度，比如960像素

可视视口

可视视口就是手机可以展示的区域，比如320像素

理想视口

  将960像素的页面一直缩放到320像素，这样在手机的可视视口就可以展示出整个页面，但还是有个问题，将大页面缩  放成小页面虽然是能够完整的看到整个页面但要看清某个细节还是要放大页面(视口)才可以，这个时候就到理想视口  登场的时候了，理想视口就是布局视口在一个设备上的最佳尺寸，我觉得布局视口和手机屏幕一样大就是它的最佳尺  寸，那么这就是理想视口，设置理想视口需要使用mata标签引入  <meta name="viewport" content="width=device-width">  这句代码就是将布局视口设置的和设备宽度一样大，这样就可以很清楚的观看页面上的每一部分