使用 CSS 根据屏幕尺寸更改布局

为了根据屏幕尺寸在 CSS 中更改布局，我们将创建一个父 div 并将其他子 div 包裹在其中。使用 媒体查询，屏幕尺寸的布局将发生变化。当您需要为不同的设备（例如平板电脑、手机、台式机等）设置样式时，可以使用媒体查询。

在这篇文章中，我们有四个宽度相同的盒子，我们的任务是使用 CSS 根据屏幕尺寸更改布局。

根据屏幕尺寸更改布局的步骤

我们将遵循以下步骤来使用 CSS 根据屏幕尺寸更改布局。

  • 我们创建了四个宽度相同的 div 盒子，并将它们包装在一个名为 container 的父 div 中。
  • 然后，我们使用了 col 类，它设置了所有四个盒子的 宽度、填充 和文本 颜色。CSS float 属性将四个盒子左对齐，并将其并排放置在一行中。
  • 然后，我们使用 background-color 属性来设置每个盒子的不同颜色。
  • 我们使用 :after 伪元素来清除浮动，并使父 div 的行为类似于表格，该表格包含浮动子元素，允许父 div 正确扩展。
  • 我们使用 **媒体查询** 来根据屏幕尺寸更改布局。如果屏幕尺寸小于 900px，则盒子的宽度将从 25% 变为 50%。当屏幕尺寸小于 600px 时，盒子的宽度将从 50% 变为 100%。

示例

这是一个完整的示例代码，它实现了上述步骤，以使用 CSS 根据屏幕尺寸更改布局。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <style>
        * {
            box-sizing: border-box;
        }
        .col {
            color: white;
            float: left;
            width: 25%;
            padding: 10px;
        }
        .col1 {
            background-color: rgb(153, 29, 224);
        }
        .col2 {
            background-color: rgb(12, 126, 120);
        }
        .col3 {
            background-color: rgb(207, 41, 91);
        }
        .col4 {
            background-color: rgb(204, 91, 39);
        }
        .container:after {
            content: "";
            display: table;
            clear: both;
        }
        @media screen and (max-width: 900px) {
            .col {
                width: 50%;
            }
        }
        @media screen and (max-width: 600px) {
            .col {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <h3>
        Changing Layouts Based on Screen Size
        using CSS
    </h3>
    <p>
        Resize the screen to see the below divs
        resize themselves.
    </p>
    <div class="container">
        <div class="col col1">
            <h2>First box</h2>
        </div>
        <div class="col col2">
            <h2>Second box</h2>
        </div>
        <div class="col col3">
            <h2>Third box</h2>
        </div>
        <div class="col col4">
            <h2>Fourth box</h2>
        </div>
    </div>
</body>
</html>

结论

在这篇文章中，我们了解了如何使用 CSS 媒体查询根据屏幕尺寸更改布局。我们创建了四个盒子，并根据屏幕尺寸将它们的宽度从 25% 调整到 50%，然后调整到 100%。

更新于：2024年9月25日

14K+ 次浏览

启动你的 职业生涯

完成课程获得认证

开始学习
广告