参考资料

  1. css如何居中一个div
  2. CSS尺寸属性详细说明以及案例
  3. CSS 阴影效果属性
  4. 如何用Flex布局制作响应式布局？
  5. CSS 阴影效果设置
  6. 多重选择器详细说明以及案例
  7. 几种常用的 CSS 横向布局方法
  8. 如何避免Flex容器高度塌陷？

CSS响应式详细说明以及案例

CSS响应式设计是一种使网页在不同设备上都能良好显示的技术，主要依靠媒体查询（Media Queries）、弹性布局（Flexbox）、网格布局（Grid）、相对单位（如百分比、em、rem）等技术来实现。

1. 媒体查询（Media Queries）

媒体查询是响应式设计的核心，它可以根据设备的特性（如屏幕宽度、高度、分辨率等）来应用不同的样式。

/* 默认样式 */
body {
    background-color: lightblue;
}

/* 当屏幕宽度小于600px时应用此样式 */
@media (max-width: 600px) {
    body {
        background-color: lightcoral;
    }
}

2. 弹性布局（Flexbox）

Flexbox是一种一维布局模型，适合用来创建灵活的、可伸缩的布局。

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.item {
    flex: 1;
}

3. 网格布局（Grid）

CSS Grid是一种二维布局系统，适合创建复杂的布局结构。

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.grid-item {
    background-color: lightgreen;
}

4. 相对单位

使用相对单位（如百分比、em、rem）可以使布局更具弹性。

.container {
    width: 80%;
    margin: 0 auto;
}

.text {
    font-size: 1.2em;
}

综合案例

以下是一个简单的响应式网页布局案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Design Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .header {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }

        .nav {
            display: flex;
            justify-content: space-around;
            background-color: lightcoral;
            padding: 10px;
        }

        .content {
            display: flex;
            flex-wrap: wrap;
        }

        .main {
            flex: 70%;
            padding: 20px;
            background-color: lightgreen;
        }

        .sidebar {
            flex: 30%;
            padding: 20px;
            background-color: lightyellow;
        }

        .footer {
            background-color: lightblue;
            padding: 10px;
            text-align: center;
        }

        @media (max-width: 600px) {
            .nav {
                flex-direction: column;
                align-items: center;
            }

            .content {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Responsive Design Example</h1>
    </div>
    <div class="nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>
    <div class="content">
        <div class="main">
            <h2>Main Content</h2>
            <p>This is the main content area.</p>
        </div>
        <div class="sidebar">
            <h2>Sidebar</h2>
            <p>This is the sidebar content.</p>
        </div>
    </div>
    <div class="footer">
        <p>Footer Content</p>
    </div>
</body>
</html>

说明

  • 媒体查询：当屏幕宽度小于600px时，导航栏变为垂直排列，内容区域也从水平排列变为垂直排列。

  • 弹性布局：导航栏和内容区域使用Flexbox进行布局，使它们在不同屏幕尺寸下都能灵活调整。

  • 相对单位：使用了百分比和em单位，使布局更具弹性。

通过以上方法，可以创建出适应不同设备的响应式网页。

TAG：布局弹性单位不同媒体网页百分比屏幕技术网格