随着互联网上使用手机的用户数量不断增加，网站设计师越来越需要以适合各种屏幕尺寸的方式排列内容。自适应 Web 设计最初由 Ethan Marcotte 在 A List Apart 中定义，是一种设计策略，通过更改网站的布局以适应所用设备，从而响应用户的需求和设备的功能。例如，自适应网站可能会在手机上以单列视图显示内容，在平板电脑上以双列视图显示内容，在桌面计算机上以三列或四列视图显示内容。
由于支持互联网的设备有如此多的可能屏幕尺寸，因此您的网站必须能够适应任何现有或未来的屏幕尺寸。现代响应式设计还考虑了触摸屏等互动模式。我们的目标是为所有用户优化体验。
设置视口
针对各种设备进行了优化的网页必须在文档的标头中包含视口元标记。此标记可告知浏览器如何控制网页的尺寸和缩放比例。
为了尽可能提供最佳体验，移动设备浏览器会以桌面屏幕宽度（通常约为 980px，但因设备而异）呈现网页，然后尝试通过放大字体和缩放内容的比例以适应相应屏幕的尺寸，使内容看起来更美观。这可能会导致字体看起来不一致，并且需要用户放大才能查看内容并与内容互动。
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
使用元视口值 width=device-width 可指示页面以设备无关像素 (DIP) 的宽度与屏幕宽度保持一致，DIP 是一种标准的视觉像素单位（可由高密度屏幕上的许多物理像素组成）。这样，页面就可以重新流式传输内容，以适应不同的屏幕尺寸。
某些浏览器在旋转到横屏模式时会保持网页的宽度不变，并缩放以填满屏幕，而不是重新流布局。添加值 initial-scale=1 会告知浏览器在任何设备屏幕方向下，在 CSS 像素和与设备无关的像素之间设置 1:1 的关系，让网页充分利用横屏宽度。
Lighthouse 审核中的不含 <meta name="viewport"> 标记（带有 width 或 initial-scale）可帮助您自动确保 HTML 文档正确使用视口元标记。
将内容大小调整为适合视口
在桌面设备和移动设备上，用户都习惯垂直滚动网站，而不是水平滚动。强制用户水平滚动或缩小视图以查看整个网页会导致用户体验不佳。
在使用视口元标记开发移动网站时，通常会不小心创建无法完全适应指定视口的网页内容。例如，显示的图片宽度超出视口宽度可能会导致水平滚动。为避免出现这种情况，请调整内容以使其适合视口。
未根据视口正确设置内容尺寸 Lighthouse 审核可以帮助您自动检测内容溢出问题。
图片
如果固定尺寸的图片大于视口，则会导致页面滚动。我们建议为所有图片设置 max-width 为 100%，这样可以缩小图片以适应可用空间，同时防止图片超出其初始大小。
在大多数情况下，您可以通过向样式表中添加以下代码来实现此目的：
img {
max-width: 100%;
display: block;
}
向 img 元素添加图片的尺寸
即使您设置了 max-width: 100%，我们仍建议您向 <img> 代码添加 width 和 height 属性，以便浏览器在图片加载之前为其预留空间。这有助于防止布局偏移。
布局
由于不同设备（例如手机和平板电脑，甚至不同手机）的屏幕尺寸和 CSS 像素宽度差异很大，因此内容不应依赖于特定的视口宽度才能正常呈现。
以前，此操作需要以百分比设置布局元素。使用像素测量要求用户在小屏设备上水平滚动：