视口与响应式布局-CSDN博客

本文链接：https://blog.csdn.net/qq_53810245/article/details/122526517

一、利用meta标签设置视口

在meta标签中，将name属性设为viewport，即可设置视口，示例代码如下。

<meta name="viewport" content="width=device-width">

视口的常用设置
在这里插入图片描述
例如：

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">

二、响应式布局容器

响应式网站中使用布局容器来实现控制页面中每个元素的大小和布局变化，需要一个父级元素作为布局容器，来配合子级元素实现变化效果。其原理是，在不同屏幕下，通过媒体查询来改变这个布局容器的大小，然后改变里面的子元素的排列方式和大小，从而实现不同屏幕下，页面布局和样式发生变化。

在移动Web开发中，常见的响应式布局容器尺寸划分如下所示。
在这里插入图片描述
使用媒体查询的方式在不同屏幕尺寸下对布局容器的宽度进行设置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" name="viewport" content="width=device-width">
  <style>
      /* 1. 超小设备（小于576px）布局容器的宽度为100% */
      @media screen and (max-width: 575px) {
          .container {
              width: 100%;
          }
      }

      /* 2. 平板设备（大于等于576px）布局容器的宽度为540px */
      @media screen and (min-width: 576px) {
          .container {
              width: 540px;
          }
      }

      /* 3. 桌面显示器（大于等于768px）布局容器宽度为720px */
      @media screen and (min-width: 768px) {
          .container {
              width: 720px;
          }
      }

      /* 4. 大桌面显示器（大于等于992px）布局容器宽度为960px */
      @media screen and (min-width: 992px) {
          .container {
              width: 960px;
          }
      }

      /* 5. 超大桌面显示器（大于等于1200）布局容器宽度为1140 */
      @media screen and (min-width: 1200px) {
          .container {
              width: 1140px;
          }
      }

      .container {
          height: 50px;
          background: #ddd;
          margin: 0 auto;
      }
  </style>
</head>
<body>
<div class="container">布局容器</div>
</body>
</html>