HTML响应式设计基础

响应式设计确保网页在不同设备（桌面、平板、手机）上都能良好显示和使用。

视口设置

视口（Viewport）是用户在浏览器中看到的网页区域。正确设置视口是响应式设计的第一步。

html

<!-- 基本视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 禁止用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<!-- 设置最大缩放级别 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">

width=device-width：让页面宽度与设备宽度一致 initial-scale=1.0：设置初始缩放比例为1

响应式图片

响应式图片可以根据不同设备和屏幕尺寸加载合适大小的图片，提高性能和用户体验。

使用srcset属性

html

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="响应式图片">

使用sizes属性

html

<img src="small.jpg" 
     srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" 
     sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw" 
     alt="响应式图片">

使用picture元素

对于需要更精细控制的情况，可以使用<picture>元素。

html

<picture>
  <!-- 小屏幕设备 -->
  <source media="(max-width: 768px)" srcset="small.jpg">
  <!-- 中等屏幕设备 -->
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <!-- 大屏幕设备 -->
  <img src="large.jpg" alt="响应式图片">
</picture>

媒体查询

媒体查询是CSS3的特性，允许根据不同的媒体类型和条件应用不同的样式。

基本语法

css

@media media-type and (media-feature) {
  /* CSS规则 */
}

常用媒体特性

width / max-width / min-width：视口宽度
height / max-height / min-height：视口高度
orientation：设备方向（portrait或landscape）
resolution：设备分辨率

示例：响应式布局

css

/* 基础样式 */
.container {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

/* 桌面设备 */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

/* 平板设备 */
@media (max-width: 1199px) and (min-width: 768px) {
  .container {
    width: 720px;
  }
}

/* 移动设备 */
@media (max-width: 767px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
}

移动端优先设计

移动端优先设计是一种现代的响应式设计方法，首先为移动设备设计，然后逐步增强为桌面设备设计。

css

/* 移动端样式（默认） */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  margin-bottom: 10px;
}

/* 平板设备 */
@media (min-width: 768px) {
  nav li {
    display: inline;
    margin-right: 20px;
    margin-bottom: 0;
  }
}

/* 桌面设备 */
@media (min-width: 1200px) {
  nav {
    float: right;
  }
}

响应式文本

响应式文本可以根据屏幕尺寸自动调整大小，提高可读性。

使用相对单位

css

/* 使用rem单位 */
html {
  font-size: 16px; /* 基础字体大小 */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1rem; /* 16px */
}

/* 响应式调整基础字体大小 */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

使用clamp()函数

clamp()函数允许设置字体大小的最小值、首选值和最大值。

css

h1 {
  font-size: clamp(24px, 5vw, 48px);
}

响应式表格

对于小屏幕设备，表格可能会出现水平滚动。可以使用以下方法优化表格的响应式显示。

html

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
        <th>邮箱</th>
        <th>电话</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>工程师</td>
        <td>zhangsan@example.com</td>
        <td>13800138000</td>
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

css

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}