问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何实现 css 布局随着屏幕宽度变化？

头像
universe_king
    3.4k13389845

    我的需求：css 使用 flex 帮我实现一个效果：左侧是一个图片，设置宽高为 200x200，右侧是一段文本；然后当在大尺寸的屏幕上，让右边的文本边充满右侧；但是如果在小尺寸的屏幕上，比如手机，那么让图片显示在上面；文本显示在下面

    chatGPT 给了我下面的代码

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;
      flex-direction: row; /* 默认水平布局 */
    }

    .image {
      width: 200px;
      height: 200px;
      background-color: #f0f0f0;
      margin-right: 20px; /* 图片和文本之间的间距 */
    }

    .text {
      flex: 1; /* 右侧文本占据剩余空间 */
    }

    /* 在小尺寸屏幕上媒体查询 */
    @media screen and (max-width: 600px) {
      .container {
        flex-direction: column; /* 垂直布局 */
      }

      .image {
        margin-bottom: 20px; /* 图片下方留出间距 */
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="image"></div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat placerat lorem.</p>
    </div>
  </div>
</body>
</html>

    但是渲染出来的布局效果并不会随着屏幕宽度而变化

    图片.png

    只会等比例变化，为什么？

    图片.png

    如何实现 css 布局随着屏幕宽度变化？

    前端css3css
    阅读 1.1k
    avatarAI BotBETA

    CSS 的媒体查询是实现响应式布局的关键。在你的代码中，你已经使用了媒体查询，但是布局并没有随着屏幕宽度的变化而变化。这可能是由于媒体查询的断点设置不正确，或者你的 CSS 样式有一些错误。

    你的媒体查询的条件是 @media screen and (max-width: 600px)，这意味着当屏幕宽度小于或等于 600px 时，将应用下面的样式。然而，从你提供的渲染效果来看，布局的变化似乎发生在屏幕宽度小于或等于 200px 时，这与你设置的 600px 断点不匹配。

    为了解决这个问题，你可以尝试调整媒体查询的断点。例如，你可以将断点设置为 @media screen and (max-width: 200px)，这样当屏幕宽度小于或等于 200px 时，将应用垂直布局的样式。以下是调整后的代码：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;
      flex-direction: row; /* 默认水平布局 */
    }

    .image {
      width: 200px;
      height: 200px;
      background-color: #f0f0f0;
      margin-right: 20px; /* 图片和文本之间的间距 */
    }

    .text {
      flex: 1; /* 右侧文本占据剩余空间 */
    }

    /* 在小尺寸屏幕上媒体查询 */
    @media screen and (max-width: 200px) {
      .container {
        flex-direction: column; /* 垂直布局 */
      }

      .image {
        margin-bottom: 20px; /* 图片下方留出间距 */
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="image"></div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat placerat lorem.</p>
    </div>
  </div>
</body>
</html>

    通过调整媒体查询的断点，你应该能够实现你所期望的响应式布局效果。当屏幕宽度大于或等于 200px 时，布局将保持水平方向；当屏幕宽度小于或等于 200px 时，布局将切换为垂直方向。

    1 个回答
    得票最新
    头像
    universe_king
      3.4k13389845

      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 要加一句

      完整的如下：

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 布局示例</title>
    <style>
        .container {
            display: flex;
        }

        .image {
            width: 200px;
            height: 200px;
        }

        .text {
            flex: 1;
        }

        /* 在小尺寸设备上，重置布局 */
        @media (max-width: 600px) {
            .container {
                flex-direction: column;
                /* 将布局改为垂直方向 */
            }

            .image {
                width: 200px;
                height: 200px;
            }
            .text {
                width: auto;
                /* 让元素宽度自适应 */
                height: auto;
                /* 让元素高度自适应 */
            }

            /* 取消 .text 的 flex 属性 */
            .text {
                flex: initial;
                /* 或者可以使用 flex: none; */
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="image">图片</div>
        <div class="text">文本</div>
    </div>
</body>

</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题