Css 简明教程

CSS RWD Viewport

在响应式网页设计背景下， viewport 是浏览器用来呈现网页的虚拟区域。视口对于网页开发和创建能适应各种设备和屏幕大小的响应式设计至关重要。

A viewport, in the context of responsive web design, is a virtual area used by the browser to render a web page. The viewport is essential to web development and creation of responsive designs that adapt to various devices and screen sizes.

视口也可以指定为用户可见的网页区域，它由设备屏幕大小及分辨率决定。在台式机上，视口是窗口大小，不包括工具栏和其他不属于网页的元素。在移动设备上，则是屏幕大小。

Viewport can also be specified as the user’s visible area of the web page, which is determined by the device’s screen size and its resolution. On a desktop, the viewport is the window’s size, excluding the toolbar and other elements that are not the part of the web page. And on a mobile device, it is the size of the screen.

CSS RWD Viewport - Types

视口主要有两种类型：

There are mainly two types of viewport, which are as follows:

  1. Layout Viewport: It is the virtual area used by the browser to display the web page. The layout viewport is controlled by adding the meta viewport tag in the HTML head section.

  2. Visual Viewport: It represents the part of the layout viewport that is currently visible on the screen. The visual viewport can be changed on zooming in and out.

两个视口都是可变的，这意味着，页面的加载完成后，两个视口都可以改变。

Both the viewports are mutable, which means, the dimensions of both can be altered after loading of the page.

CSS RWD Viewport - Setting

如上在布局视口中所述， <meta> 标签可用于设置视口。 <meta> 标签在每个页面上的使用，给浏览器提供了控制页面尺寸和缩放的说明。

As mentioned above in the layout viewport, <meta> tag can be used to set the viewport. The use of <meta> tag on every page. gives the browser instructions to control the page’s dimensions and scaling.

参考下面的示例以了解视口的设置方式，以及内容基于视口大小的变化。改变视口大小以查看效果。

Refer the example given below to understand how the viewport can be set and based on the size of the viewport, the content gets altered. Change the viewport size to see the effect.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   #card-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 500px;
   }

   @media screen and (max-width: 550px){
      #card-container {
      flex-direction: column
      }
   }

   .card {
      width: 100px;
      height: 80px;
      border: 1px solid black;
      border-radius: 10px;
      background-color: aquamarine;
      text-align: center;
      font-size: 4em;
   }
</style>
</head>
<body>
   <div id="card-container">
   <div class="card">
      <span class="card-number">1</span>
   </div>
   <div class="card">
      <span class="card-number">2</span>
   </div>
   <div class="card">
      <span class="card-number">3</span>
   </div>
   </div>
</body>
</html>

以上示例中，添加了一个媒体查询来设置flex的方向为列，当屏幕尺寸缩小到550px时，否则flex方向为行。

In the above example, a media query is added to set the direction of the flex as column, when the screen size reduces upto 550px, else the flex direction is in row.