什么是视域？
视口是一个网页的用户的可见区域。
视口与设备而变化，并且将在手机上比在计算机屏幕上小。
平板电脑和手机之前，网页被设计只为计算机屏幕，它是常见的网页具有静态设计和固定尺寸。
然后，当我们开始使用冲浪平板电脑和手机互联网，固定大小的网页过大，以适应视口。 为了解决这个问题，浏览器缩小整个网页以适合屏幕在这些设备上。
这不是完美的！ 但是，速战速决。
设置视口
HTML5引入了一个方法，让网页设计师采取控制在视口中，通过<meta>标记。
你应该包括以下<meta>视区所有网页元素：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
一个<meta>视元素对如何控制页面的尺寸和缩放浏览器的说明。
的width=device-width部分设置页面的宽度跟随设备的屏幕宽度（这将取决于在设备上）。
该initial-scale=1.0部分设置当页面首先被浏览器加载的初始放大级。
这里是一个网页，而不视meta标签，并与视口元标记同一网页的例子：
提示：如果你正在浏览此页面用手机或平板电脑，则可以在两个链接点击查看区别。
大小内容到视
用户习惯于台式机和移动设备上的垂直滚动网站 - 而不是水平！
因此，如果用户不得不水平滚动，或缩小，看到整个网页，它会导致糟糕的用户体验。
一些额外的规律可循：
1.不要使用大固定宽度的元素-例如，如果图像是在宽度小于视它可能会导致视口水平滚动显示更宽。 记住要调整这个内容，以适应视口的宽度内。
2.不要让内容依赖于特定的视口宽度呈现良好 -由于屏幕尺寸以及宽度CSS像素的设备之间有很大的不同，内容不应该依赖一个特定的视口宽度来呈现良好。
3.使用CSS媒体查询，应用不同的造型为小型和大屏幕 -设置绝对大的CSS宽度的页面元素，将导致元件也无法满足一个较小的设备上的视口。 相反，考虑使用相对宽度值，如宽度：100％。 此外，要小心使用大绝对定位的值。 这可能会导致该元素添加到视区之外落在小型设备。