响应式设计基础

响应式设计让同一个网页在手机、平板、电脑上都好看——不需要单独的移动版网站。

学完本章你将： 掌握 viewport meta 标签、媒体查询入门、响应式图片。

viewport 元标签

html

<!-- 这行代码是响应式的起点——必须放在 head 中 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

⚠️ 不加这行 → 手机显示缩小的桌面版网页，字小得看不清。

媒体查询入门

html

<style>
  /* 默认（移动优先） */
  .container { width: 100%; padding: 10px; }
  .column { width: 100%; }

  /* 平板及以上（≥768px） */
  @media (min-width: 768px) {
    .container { width: 750px; margin: 0 auto; }
    .column { width: 50%; float: left; }
  }

  /* 桌面（≥1024px） */
  @media (min-width: 1024px) {
    .container { width: 960px; }
    .column { width: 33.33%; }
  }
</style>

响应式图片

html

<!-- 根据屏幕宽度加载不同尺寸 -->
<img src="small.jpg"
     srcset="small.jpg 480w,
             medium.jpg 800w,
             large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 900px) 800px,
            1200px"
     alt="响应式图片">

响应式框架

如果你不想从零写 CSS，可以用 Bootstrap 或 Tailwind CSS：

html

<!-- Bootstrap 栅格 -->
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">列 1</div>
    <div class="col-12 col-md-6 col-lg-4">列 2</div>
  </div>
</div>

响应式设计

响应式设计基础

viewport 元标签

媒体查询入门

响应式图片

响应式框架

🛠️ 学完试试这些工具