CSS RWD视口

• 

  响应式网页设计 - 视口

  什么是视口？视口是用户在网页上的可见区域。视口因设备而异，在手机上比在计算机屏幕上小。在平板电脑和移动电话之前，网页仅设计用于计算机屏幕，并且网页通常具有静态设计和固定大小。然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大而无法容纳视口。为了解决这个问题，这些设备上的浏览器按比例缩小整个网页以适应屏幕。这不完美!! 但快速修复。

• 

  设置视口

  HTML5引入了一种方法，让Web设计人员通过<meta>标记控制视口 。您应该在所有网页中包含以下视口元素：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  一个<meta>视元素对如何控制网页的尺寸和缩放浏览器的说明:
  width=device-width部分将页面宽度设置为遵循设备的屏幕宽度（具体取决于设备）。
  initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。
  这里是一个网页的一个例子：

  提示：如果您使用手机或平板电脑浏览此页面，可以点击下面的两个链接查看差异。

  使用视口设置》》》》

  没有使用视口设置》》》》

• 

  视口大小内容

  用户用于在桌面和移动设备上垂直滚动网站 - 但不是横向滚动！因此，如果用户被迫水平滚动或缩小，以查看整个网页，则会导致糟糕的用户体验。一些额外的规则要遵循：
  1.不要使用大的固定宽度元素 - 例如，如果图像的宽度比视口宽，则可能导致视口水平滚动。请记住调整此内容以适合视口的宽度。
  2.不要让内容依赖于特定的视口宽度来渲染 - 由于CSS像素中的屏幕尺寸和宽度在设备之间变化很大，因此内容不应依赖于特定的视口宽度来渲染。
  3.使用CSS媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置较大的绝对CSS宽度将导致元素对于较小设备上的视口而言太宽。相反，请考虑使用相对宽度值，例如宽度：100％。另外，请注意使用较大的绝对定位值。它可能导致元素落在小型设备上的视口之外。