HTML5响应式使用css媒体查询

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 部分

•  声明文档类型为 HTML5。
•  定义 HTML 文档的根元素，并设置语言为中文（中国大陆）。

•  设置文档的字符编码为 UTF-8。
•  配置视口，让页面宽度与设备宽度相同，初始缩放比例为 1.0。
•  设置页面的标题为 “响应式作品集”。
•  引入外部样式表 style.css。

    

        

            
我的作品集
            

                
首页
                
作品
                
关于
            
        
    

•  定义页面的页眉部分。
•  定义导航栏。

• 我的作品集

   显示网站标题。
•  定义无序列表。
  •  定义列表项。
  • 首页 定义链接，点击后跳转到页面内 ID 为 home 的元素位置（这里代码中未给出 home 元素）。

      
  
          
  
              
  
                  
                  
  作品标题1
                  
  作品描述内容
              
              
  
                  
                  
  作品标题2
                  
  作品描述内容
              
              
  
                  
                  
  作品标题3
                  
  作品描述内容
              
          
      

  •  定义页面的主要内容区域。
  •  定义一个章节，ID 为 works，类名为 portfolio。
  •  定义一个卡片容器。
  •  显示一张占位图片，alt 属性为图片的替代文本。

  • 作品标题1

     显示作品标题。

  • 作品描述内容

     显示作品描述。

      
  
          
  ©  All rights reserved.
      
  
  

  •  定义页面的页脚部分。

  • © All rights reserved.

     显示版权信息，© 是版权符号的 HTML 实体。

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