响应式 Web 开发终极指南

介绍

以下是如何确保您的设计在任何设备上保持灵活且美观的方法。让我们看一下使 web 应用程序响应式时需要考虑的关键事项。

css 单位

css 提供了多种单位，有时会让人难以选择正确的单位。

• px：无论屏幕尺寸如何，基于像素的单位都保持不变。
• %：基于百分比的单位相对于其父元素的大小。
• vw 和 vh：基于视口宽度/高度的单位相对于视口的宽度/高度。
• dvw 和 dvh：动态视口宽度和高度单位与 vw 和 vh 类似，但它们会根据视口的变化（即屏幕键盘出现时）进行动态调整。
• rem：相对于根元素的字体大小，为缩放提供一致的基础。
• em：相对于当前元素的字体大小，对于组件内缩放很有用。
• calc()：允许您使用不同单位执行计算的函数。例如，calc(100% - 20px) 可以帮助混合相对和绝对单位。

有关 css 单元的完整列表（尽管许多单元很少使用），请查看此 mdn web 文档页面。

响应式图像

有几种方法可以提高网络上的图像响应能力。

使用宽度和高度：自动

通过将最大宽度限制和高度设置为自动，我们可以使图像响应，而无需更改图像的长宽比。

img {
    width: 100%; /* or any fixed width */
    height: auto; 
  }

如果您希望图像缩小，但不要放大到大于其原始大小，请使用 max-width 而不是 width。

使用 img 元素和 srcset

如果您需要针对不同视口大小或分辨率的同一图像的不同版本怎么办？带有 srcset 属性的 标签允许浏览器自动选择最适合设备的图像。
请注意，不同版本并不意味着相同的文件，而是经过调整（例如调整大小、压缩）以适应不同设备的图像。

@@##@@

• 如果视口宽度为600px或更小，浏览器将使用宽度为100vw的。浏览器还将使用作为后备图像。
• 如果视口宽度在 601px 到 1200px 之间，浏览器将使用宽度为 75vw 的medium.jpg。
• 对于任何宽度超过1200px的视口，浏览器将使用宽度为50vw的。

使用图片元素和 srcset

如果您需要针对不同视口大小或分辨率的不同图像怎么办？带有 srcset 属性的 元素允许您为不同的视口大小或分辨率定义不同的图像。

<picture><source srcset="" media="(max-width: 600px)"><source srcset="medium.jpg" media="(max-width: 1200px)">
  @@##@@
</source></source></picture>

在此示例中：

• 如果视口宽度为600px或更小，浏览器将使用。
• 如果视口宽度在 601px 到 1200px 之间，浏览器将使用medium.jpg。
• 对于任何超过 1200px 的视口宽度，浏览器将使用 。

响应式排版

相对单位

html {
    font-size: 16px;
}
.parent {
    font-size: 2rem; /* 32px (2 * 16px) */
}
.child {
    font-size: 0.5em; /* 16px (0.5 * 32px) */
}

• em 单位是相对于父元素的字体大小。在上面的示例中，子类的字体大小为 16px，因为它是父元素字体大小（32px）的一半。

• rem 单位是相对于根元素的字体大小 (html) 而言的。在上面的示例中，父类的字体大小为 32px，因为它是根类字体大小（16px）的两倍。

基于视口的单位

h1 {
  font-size: 5vw;
}
h2 {
  font-size: 5vh;
}

• vw 单位与视口的宽度相关。
• vh 单位是相对于视口高度的。

夹紧功能

如果您需要使用相对或基于视口的单位但在最小和最大限制范围内怎么办？
例如，我希望我的字体大小相对于视口的宽度，但最小值应为 12px，最大值应为 48px。钳位功能是此类场景的理想选择。

h1 {
  font-size: clamp(12px, 3vw, 48px);
}

响应式布局

弹性盒

如果您需要主要在一维布局中对齐项目怎么办？ （行或列）

<div class="card-container">
  <div class="card">card 1</div>
  <div class="card">card 2</div>
  <div class="card">card 3</div>
</div>

.card-container {
  display: flex; /* enable flexbox layout */
  justify-content: space-around; /* space evenly between and around cards */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

在此处了解有关 flexbox 的更多信息

网格

如果您需要主要在二维布局中对齐项目怎么办？ （行和列）

<div class="card-container">
  <div class="card">card 1</div>
  <div class="card">card 2</div>
  <div class="card">card 3</div>
  <div class="card">card 4</div>
</div>

.card-container {
  display: grid; /* enable grid layout */
  grid-template-columns: 1fr 1fr; /* two equal columns */
  grid-template-rows: 1fr 1fr; /* two equal rows */
  gap: 10px; /* space between grid items */
  width: 100%; /* full width of the container */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

在这里阅读有关网格的更多信息

媒体查询

如果您想在设备满足特定条件时应用特定样式怎么办？最常见的是，这些条件与设备的宽度有关。

<div class="card-container">
  <div class="card">card 1</div>
  <div class="card">card 2</div>
  <div class="card">card 3</div>
</div>

.card-container {
  display: flex;
  flex-direction: column; /* default: single-column layout */
}

/* media query for tablet devices (min-width: 768px) */
@media (min-width: 768px) {
  .card-container {
    flex-direction: row; /* change to two-column layout */
  }
  .card {
    flex: 1; /* equal width for all cards */
  }
}

/* media query for desktop devices (min-width: 1024px) */
@media (min-width: 1024px) {
  .card {
    flex: 25%; /* each card takes 25% of the width */
  }
}

媒体查询还可以与其他特征一起使用，例如高度、方向、宽高比、分辨率、指针、首选颜色方案和显示模式。

视口元标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

此标签负责向浏览器提供有关如何控制页面尺寸和缩放的说明。 width=device-width 部分设置页面的宽度跟随屏幕宽度，initial-scale=1.0 控制页面首次加载时的缩放级别。

响应式框架和组件库

如果你不想重新发明轮子，有很多响应式框架可以节省时间和精力。

• bootstrap：一种广泛使用的框架，具有预先设计的组件，用于快速响应式网站开发。

• tailwind css：实用程序优先的框架，可通过实用程序类实现快速自定义设计。

• mui：基于 material design 的 react 库，提供响应式预样式组件。

• shadcn：专注于现代、可访问且可自定义的响应式组件。

• ant design：阿里巴巴面向企业应用的综合设计系统，以响应式组件为特色。

采用移动优先的方法进行设计

移动优先方法意味着从针对较小屏幕（例如智能手机）的设计开始，然后逐渐为较大屏幕（例如平板电脑和台式机）添加更多功能。通过这种方式，我们确保基本体验在移动设备上运行良好，然后您可以在此基础上为更大的设备构建。

.card-container { /* default code is for mobile view */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  gap: 12px;
}

@media (min-width: 768px) { /* queries/cases are for larger views */
  .card-container {
    flex-direction: row;
    gap: 18px;
  }
}

    <img src="" srcset=" 600w, medium.jpg 1200w,  2000w" sizes="(max-width: 600px) 100vw, 
        (min-width: 601px) and (max-width: 1200px) 75vw, 
        (min-width: 1201px) 50vw" alt="example image"><img src="" alt="example image">