HTML5响应式使用css媒体查询

发布于：2025-03-22 ⋅ 阅读:(15) ⋅ 点赞:(0)

HTML 负责搭建页面结构，CSS 负责样式设计，并且通过媒体查询实现了较好的响应式效果，能够适应不同屏幕尺寸下面就是写了一个详细的实例。

CSS 部分

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  • * 是通配选择器，会选中页面上的所有元素。
  • margin: 0; 将所有元素的外边距设置为 0。
  • padding: 0; 将所有元素的内边距设置为 0。
  • box-sizing: border-box; 改变元素宽度和高度的计算方式，使元素的宽度和高度包含内边距和边框，但不包含外边距。
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
  • font-family: Arial, sans-serif; 设置页面主体文字的字体为 Arial，如果 Arial 不可用，则使用系统默认的无衬线字体。
  • line-height: 1.6; 设置行高为字体大小的 1.6 倍，让文字在垂直方向上有合适的间距。
header {
    background-color: #333;
    color: white;
    padding: 1rem;
}
  • background-color: #333; 设置 header 元素的背景颜色为深灰色。
  • color: white; 设置 header 内文字的颜色为白色。
  • padding: 1rem; 给 header 元素添加 1 个根元素字体大小的内边距。
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
  • display: flex; 将 nav 元素设置为弹性布局容器。
  • justify-content: space-between; 在水平方向上，将子元素均匀分布，两端对齐。
  • align-items: center; 在垂直方向上，将子元素居中对齐。
  • max-width: 1200px; 设置 nav 元素的最大宽度为 1200 像素。
  • margin: 0 auto; 让 nav 元素在水平方向上居中显示。
nav ul {
    display: flex;
    list-style: none;
}
  • display: flex; 将 nav 内的无序列表设置为弹性布局容器。
  • list-style: none; 去除无序列表的默认列表项标记。
nav ul li {
    margin-left: 2rem;
}
  • margin-left: 2rem; 给 nav 内无序列表的每个列表项添加 2 个根元素字体大小的左外边距。
nav a {
    color: white;
    text-decoration: none;
}
  • color: white; 设置 nav 内链接文字的颜色为白色。
  • text-decoration: none; 去除链接的下划线。
.portfolio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
  • display: grid; 将 .portfolio 元素设置为网格布局容器。
  • grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 定义网格列的布局，会根据容器宽度自动适应列数，每列最小宽度为 300 像素，最大宽度平均分配剩余空间。
  • gap: 2rem; 设置网格项之间的间距为 2 个根元素字体大小。
  • padding: 2rem; 给 .portfolio 元素添加 2 个根元素字体大小的内边距。
  • max-width: 1200px; 设置 .portfolio 元素的最大宽度为 1200 像素。
  • margin: 0 auto; 让 .portfolio 元素在水平方向上居中显示。
.card {
    background: #f4f4f4;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
  • background: #f4f4f4; 设置 .card 元素的背景颜色为浅灰色。
  • padding: 1rem; 给 .card 元素添加 1 个根元素字体大小的内边距。
  • border-radius: 8px; 给 .card 元素添加 8 像素的圆角。
  • box-shadow: 0 2px 5px rgba(0,0,0,0.1); 给 .card 元素添加一个轻微的阴影效果。
.card img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
  • width: 100%; 设置 .card 内图片的宽度为父元素宽度的 100%。
  • height: auto; 让图片的高度根据宽度自动调整，保持图片的原始比例。
  • border-radius: 4px; 给 .card 内图片添加 4 像素的圆角。
.card h3 {
    margin: 1rem 0;
}
  • margin: 1rem 0; 给 .card 内的 h3 标题添加上下 1 个根元素字体大小的外边距。
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
}
  • background: #333; 设置 footer 元素的背景颜色为深灰色。
  • color: white; 设置 footer 内文字的颜色为白色。
  • text-align: center; 让 footer 内的文字居中显示。
  • padding: 1rem; 给 footer 元素添加 1 个根元素字体大小的内边距。
  • position: fixed; 将 footer 元素固定在页面上。
  • bottom: 0; 让 footer 元素位于页面底部。
  • width: 100%; 设置 footer 元素的宽度为 100%。
/* 响应式设计 */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        text-align: center;
    }

    nav ul {
        margin-top: 1rem;
        flex-direction: column;
    }

    nav ul li {
        margin: 0.5rem 0;
    }

    .portfolio {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
}
  • @media (max-width: 768px) 是媒体查询，当屏幕宽度小于等于 768 像素时，应用以下样式。
  • flex-direction: column; 将 nav 元素和 nav 内的无序列表的弹性布局方向改为垂直方向。
  • text-align: center; 让 nav 内的文字居中显示。
  • margin-top: 1rem; 给 nav 内的无序列表添加 1 个根元素字体大小的上外边距。
  • margin: 0.5rem 0; 给 nav 内无序列表的每个列表项添加上下 0.5 个根元素字体大小的外边距。
  • grid-template-columns: 1fr; 将 .portfolio 元素的网格布局改为单列。
  • padding: 1rem; 给 .portfolio 元素添加 1 个根元素字体大小的内边距。

HTML 部分

<!DOCTYPE html>
<html lang="zh-CN">
  • <!DOCTYPE html> 声明文档类型为 HTML5。
  • <html lang="zh-CN"> 定义 HTML 文档的根元素，并设置语言为中文（中国大陆）。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式作品集</title>
    <link rel="stylesheet" href="style.css">
</head>
  • <meta charset="UTF-8"> 设置文档的字符编码为 UTF-8。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> 配置视口，让页面宽度与设备宽度相同，初始缩放比例为 1.0。
  • <title>响应式作品集</title> 设置页面的标题为 “响应式作品集”。
  • <link rel="stylesheet" href="style.css"> 引入外部样式表 style.css。
<body>
    <header>
        <nav>
            <h1>我的作品集</h1>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#works">作品</a></li>
                <li><a href="#about">关于</a></li>
            </ul>
        </nav>
    </header>
  • <header> 定义页面的页眉部分。
  • <nav> 定义导航栏。
  • <h1>我的作品集</h1> 显示网站标题。
  • <ul> 定义无序列表。
  • <li> 定义列表项。
  • <a href="#home">首页</a> 定义链接，点击后跳转到页面内 ID 为 home 的元素位置（这里代码中未给出 home 元素）。
    <main>
        <section id="works" class="portfolio">
            <div class="card">
                <img src="https://via.placeholder.com/300" alt="作品1">
                <h3>作品标题1</h3>
                <p>作品描述内容</p>
            </div>
            <div class="card">
                <img src="https://via.placeholder.com/300" alt="作品2">
                <h3>作品标题2</h3>
                <p>作品描述内容</p>
            </div>
            <div class="card">
                <img src="https://via.placeholder.com/300" alt="作品3">
                <h3>作品标题3</h3>
                <p>作品描述内容</p>
            </div>
        </section>
    </main>
  • <main> 定义页面的主要内容区域。
  • <section id="works" class="portfolio"> 定义一个章节，ID 为 works，类名为 portfolio。
  • <div class="card"> 定义一个卡片容器。
  • <img src="https://via.placeholder.com/300" alt="作品1"> 显示一张占位图片，alt 属性为图片的替代文本。
  • <h3>作品标题1</h3> 显示作品标题。
  • <p>作品描述内容</p> 显示作品描述。
    <footer>
        <p>&copy;  All rights reserved.</p>
    </footer>
</body>
</html>
  • <footer> 定义页面的页脚部分。
  • <p>&copy; All rights reserved.</p> 显示版权信息，&copy; 是版权符号的 HTML 实体。

你尽管努力，剩下交给天意。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布