使用 @media screen 实现响应式设计-html教程-PHP中文网

使用 @media screen 实现响应式设计

霞舞

发布： 2025-10-31 10:04:33

原创

230人浏览过

使用 @media screen 实现响应式设计

本文旨在帮助初学者理解如何使用 CSS 的 `@media screen` 特性构建响应式导航栏。通过实例代码，我们将演示如何根据屏幕尺寸调整导航栏的布局，使其在不同设备上都能提供良好的用户体验。我们将介绍使用 `float` 和 `flexbox` 两种方法来实现响应式布局，并提供相应的代码示例和注意事项。

响应式设计的核心：@media screen

响应式设计的核心在于能够根据设备的屏幕尺寸，动态地调整网页的布局和样式。@media screen 是 CSS3 中用于实现这一目标的关键特性。它允许我们针对不同的屏幕尺寸定义不同的 CSS 规则，从而实现网页在不同设备上的自适应显示。

使用 @media screen 和 float 实现响应式导航栏

以下是一个使用 @media screen 和 float 属性实现响应式导航栏的示例。

HTML 结构:

<header>
    <div class="clearfix">
        <div class="logo">
            <a href="">
                <img width="60px" src="pictures/airbnb2.png" alt="Airbnb Logo">
            </a>
        </div>

        <nav>
            <ul>
                <li><a href="">Log-in</a></li>
                <li><a href="">Registrieren</a></li>
                <li><a href="">Hilfe</a></li>
                <li><a href="">Gastgeber werden</a></li>
            </ul>
        </nav>
    </div>
</header>

登录后复制

CSS 样式:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.clearfix::after {
    content:"";
    clear:both;
    display:table
}

/* Header bzw. Navigation */
.clearfix {
    width: 100%;
    height: 80px;
    background-color: lightgray;
}

.logo {
    height: inherit;
    width: 80px;
    float: left;
    padding: 10px;
}

ul {
    list-style-type: none;
}

li {
    float: right;
    padding: 31.2px 20px;
}

a:link, a:visited {
    text-decoration: none;
    color: black;
}

li:hover {
    border-bottom: 2px solid black;
    height: 80px;
}

@media only screen and (max-width: 700px) {
    .logo,
    li {
        float: none;
    }
}

登录后复制

代码解释:

.clearfix 类用于清除浮动，确保父元素能够正确包裹浮动的子元素。
.logo 和 li 元素默认使用 float: left 和 float: right 实现水平排列。
@media only screen and (max-width: 700px) 定义了一个媒体查询，当屏幕宽度小于等于 700px 时，应用其中的 CSS 规则。
在媒体查询中，将 .logo 和 li 的 float 属性设置为 none，使其不再浮动，从而实现垂直排列。注意，这里需要选择器是 li 而不是 .li。

注意事项:

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

确保正确选择需要修改样式的元素。在媒体查询中，要针对 HTML 元素（如 li）而不是 CSS 类名（如 .li）进行样式修改。
float 属性的使用需要配合清除浮动，以避免布局问题。

使用 @media screen 和 Flexbox 实现响应式导航栏

另一种实现响应式导航栏的方法是使用 Flexbox 布局。Flexbox 提供了更灵活的布局控制，可以更容易地实现各种复杂的布局需求。

HTML 结构 (同上):

<header>
    <div class="clearfix">
        <div class="logo">
            <a href="">
                <img width="60px" src="pictures/airbnb2.png" alt="Airbnb Logo">
            </a>
        </div>

        <nav>
            <ul>
                <li><a href="">Log-in</a></li>
                <li><a href="">Registrieren</a></li>
                <li><a href="">Hilfe</a></li>
                <li><a href="">Gastgeber werden</a></li>
            </ul>
        </nav>
    </div>
</header>

登录后复制

CSS 样式:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* Header bzw. Navigation */
.clearfix {
    display: flex;
}

.logo, nav {
    width: 50%;
}

ul {
    display: flex;
    width: 100%;
    list-style-type: none; /* 移除ul默认样式 */
    justify-content: flex-end; /* 将列表项推到右侧 */
}

li {
    padding: 31.2px 20px;
}

a:link, a:visited {
    text-decoration: none;
    color: black;
}

li:hover {
    border-bottom: 2px solid black;
    height: 80px;
}

@media only screen and (max-width: 700px) {
    .clearfix {
        flex-direction: column; /* 垂直排列子元素 */
    }

    .logo, nav {
        width: 100%; /* 占据全部宽度 */
    }

    ul {
        justify-content: center; /* 列表项居中 */
    }
}

登录后复制

代码解释:

.clearfix 类现在使用 display: flex 属性，使其成为一个 Flex 容器。
.logo 和 nav 元素默认占据 clearfix 容器的 50% 宽度。
ul 元素也使用 display: flex 属性，并使用 justify-content: flex-end 将列表项推到右侧。
在媒体查询中，将 .clearfix 的 flex-direction 属性设置为 column，使其子元素垂直排列。
.logo 和 nav 元素现在占据 clearfix 容器的 100% 宽度。
ul 元素的 justify-content 属性设置为 center，使列表项居中显示。

注意事项:

Flexbox 布局提供了更灵活的布局控制，但需要理解 Flex 容器和 Flex 项目的概念，以及各种 Flex 属性的作用。
使用 Flexbox 可以更容易地实现各种复杂的布局需求，例如垂直居中、等高布局等。

总结

本文介绍了如何使用 CSS 的 @media screen 特性构建响应式导航栏。我们演示了使用 float 和 flexbox 两种方法来实现响应式布局，并提供了相应的代码示例和注意事项。通过学习本文，你应该能够掌握响应式设计的基本原理，并能够使用 @media screen 和 float 或 flexbox 构建简单的响应式导航栏。掌握这些基础知识后，你可以进一步学习更高级的响应式设计技巧，例如使用 CSS Grid Layout、响应式图片等，以构建更复杂的响应式网页。

以上就是使用 @media screen 实现响应式设计的详细内容，更多请关注php中文网其它相关文章！