7. 实现响应式布局的五种方式

书诚小驿2025/02/22前端面经Css

提示

DETAILS

媒体查询（Media Queries）：通过 @media 规则根据屏幕尺寸应用不同的样式。
流式布局（Fluid Layouts）：使用百分比宽度使布局能够自动调整。
弹性布局（Flexbox）：提供灵活的布局能力，自动调整元素的大小和排列。
网格布局（CSS Grid）：更强大的二维布局方式，同时控制行和列的布局。
图片和媒体的响应式：确保图片和媒体内容在不同设备上都能正确显示。

参考答案

DETAILS

1.使用媒体查询

媒体查询是响应式设计中最常用的方法之一。通过在 CSS 中使用 @media 规则，可以根据不同的屏幕尺寸应用不同的样式。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Queries Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      .container {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
      }
      .box {
        width: 100%;
        margin-bottom: 20px;
        padding: 20px;
        background-color: lightblue;
        box-sizing: border-box;
      }
      /* 大屏幕 */
      @media (min-width: 1200px) {
        .container {
          max-width: 1200px;
          margin: 0 auto;
        }
        .box {
          width: 31%;
          margin: 1%;
          float: left;
        }
      }
      /* 中屏幕 */
      @media (min-width: 768px) and (max-width: 1199px) {
        .container {
          max-width: 768px;
          margin: 0 auto;
        }
        .box {
          width: 48%;
          margin: 1%;
          float: left;
        }
      }
      /* 小屏幕 */
      @media (max-width: 767px) {
        .container {
          max-width: 100%;
          margin: 0 auto;
        }
        .box {
          width: 100%;
          margin: 0;
          float: none;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
      <div class="box">Box 3</div>
    </div>
  </body>
</html>

2.弹性布局（Flexbox）

Flexbox 是一种现代的布局方式，提供了更灵活的布局能力，能够自动调整元素的大小和排列。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      .container {
        display: flex;
        flex-wrap: wrap;
        padding: 20px;
      }
      .box {
        flex: 1;
        margin: 1%;
        padding: 20px;
        background-color: lightblue;
        box-sizing: border-box;
      }
      @media (max-width: 767px) {
        .box {
          flex-basis: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
      <div class="box">Box 3</div>
    </div>
  </body>
</html>

3.网格布局（Grid）

CSS Grid 是一种更强大的二维布局方式，可以同时控制行和列的布局。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Grid Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 20px;
        padding: 20px;
      }
      .box {
        padding: 20px;
        background-color: lightblue;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
      <div class="box">Box 3</div>
    </div>
  </body>
</html>

4、图片和媒体的响应式

确保图片和媒体内容在不同设备上都能正确显示，通常使用 max-width 和 height: auto。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Images Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      .container {
        padding: 20px;
      }
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="example.jpg" alt="Responsive Image" />
    </div>
  </body>
</html>

5、流式布局（Fluid Layouts）

流式布局使用百分比宽度来定义元素的大小，使布局能够根据屏幕宽度自动调整。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fluid Layout Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      .container {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
      }
      .box {
        width: 31%;
        margin: 1%;
        padding: 20px;
        background-color: lightblue;
        box-sizing: border-box;
        float: left;
      }
      @media (max-width: 767px) {
        .box {
          width: 100%;
          margin: 0;
          float: none;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
      <div class="box">Box 3</div>
    </div>
  </body>
</html>