Css 简明教程

CSS RWD Viewport

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

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

CSS RWD Viewport - Types

视口主要有两种类型：

  1. Layout Viewport ：它是由浏览器用来显示网页的虚拟区域。布局视口通过在HTML头部部分添加元视口标签来控制。

  2. Visual Viewport ：表示的是布局视口当前在屏幕上可见的部分。视口可以在放大和缩小时发生改变。

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

CSS RWD Viewport - Setting

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

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

<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方向为行。