响应式 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 属性的标签允许浏览器自动选择最适合设备的图像。
请注意，不同版本并不意味着相同的文件，而是经过调整（例如调整大小、压缩）以适应不同设备的图像。

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

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

使用图片元素和 srcset

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

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <img src="large.jpg" alt="Example image">
</picture>

在此示例中：

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

---

响应式排版

相对单位

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 */
  }
}

Media queries can also be used with other characteristics, such as height, orientation, aspect-ratio, resolution, pointer, prefers-color-scheme, and display-mode.

Viewport Meta Tag

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

This tag is responsible for giving instructions to the browser on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen width and initial-scale=1.0, which controls the zoom level when the page is first loaded.

Responsive frameworks and component libraries

If you don't want to reinvent the wheel, there are many responsive frameworks available to save time and effort.

• Bootstrap: A widely used framework with pre-designed components for quick responsive site development.

• Tailwind CSS: A utility-first framework that enables fast custom design with utility classes.

• MUI: A React library based on Material Design, offering responsive pre-styled components.

• ShadCN: Focuses on modern, accessible, and customizable responsive components.

• Ant Design: A comprehensive design system by Alibaba for enterprise applications, featuring responsive components.

Designing with a Mobile-First Approach

A mobile-first approach means starting with the design for smaller screens, like smartphones, and then gradually adding more features for larger screens, like tablets and desktops. This way, we ensure that the basic experience works great on mobile, and then you build on that for bigger devices.

.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;
  }
}

以上是响应式 Web 开发终极指南的详细内容。更多信息请关注PHP中文网其他相关文章！