大多数现代网站使用响应性网页设计技术，以确保其外观良好、可读性好，并在任何屏幕大小的设备上保持可用性，如手机、平板电脑、笔记本电脑、台式电脑显示器、电视、投影仪等。 使用这些技术的站点有一个模板，该模板根据屏幕尺寸修改布局： 较小的屏幕通常显示线性、单列视图，其中通过单击（汉堡）图标激活菜单等UI控件。 更大的屏幕显示更多信息，可能带有水平对齐的侧栏。UI控件（如菜单项）可能始终可见，以便于访问。 响应式web设计的一个重要部分是实现CSS或JavaScript媒体查询，以检测设备大小并自动提供适合该大小的设计。我们将讨论为什么这些查询很重要以及如何使用它们，但首先，让我们讨论一般的响应式设计。 为什么响应式设计很重要？ 响应式设计如何工作？ 媒体查询最佳实践 媒体查询备选方案 您是否需要JavaScript中的媒体查询？ 选项 1：监视视场维度 选项 2：定义和监视CSS自定义属性（可变） 选项 3： 使用匹配媒体API 为什么响应式设计很重要？ 不可能只提供一个页面布局，而期望它在任何地方都能工作。 当手机在21世纪初首次获得基本的web访问时，网站所有者通常会创建两到三个单独的页面模板，松散地基于手机和桌面视图。随着设备种类呈指数级增长，这种做法变得越来越不切实际。 今天，有许多屏幕尺寸，从微型手表显示器到巨大的8K显示器甚至更大。即使你只考虑手机，最近的设备可以比许多低端笔记本电脑具有更高的分辨率。 移动设备的使用量也超过了台式电脑。除非你的网站有一组特定的用户，否则你可以期望大多数人通过智能手机访问它。尽管大多数网页设计师、开发人员和客户继续使用标准PC机，但小屏幕设备已不再是后知后觉，应该从一开始就加以考虑。 谷歌已经认识到移动设备的重要性。当网站在智能手机上可用且表现良好时，在谷歌搜索中排名会更好。好的内容仍然至关重要，但加载速度慢、无法适应用户群屏幕尺寸的网站可能会损害您的业务。 最后，考虑可访问性。一个适合所有人的网站，无论他们使用什么设备，都会吸引更多的观众。可访问性是许多国家的法律要求，但即使不是你所在的地方，也要考虑到更多的观众会带来更多的转换和更高的盈利能力。 响应式设计如何工作？ 响应式设计的基础是媒体查询：一种CSS技术，可以根据输出类型（屏幕、打印机甚至语音）、屏幕尺寸、显示纵横比、设备方向、颜色深度和指针精度等指标应用样式。媒体查询还可以考虑用户偏好，包括减少动画、明暗模式和更高对比度。 我们展示的示例演示了仅使用屏幕宽度的媒体查询，但是站点可以更加灵活。有关详细信息，请参阅MDN上的全套选项。 媒体查询支持非常出色，已经在浏览器中使用了十多年。只有IE8及以下版本没有支持。它们忽略了媒体查询应用的样式，但这有时会带来好处（请参阅下面的最佳实践部分）。 使用媒体查询应用样式有三种标准方法。第一个加载HTML代码中的特定样式表。例如，当设备的屏幕宽度至少为800像素时，以下标记将加载wide.css样式表： <link rel=”stylesheet” media=”screen and (min-width: 800px)” href=”wide.css” /> 其次，样式表可以使用@import规则有条件地加载到CSS文件中： /* main.css */ @import url(‘wide.css’) screen and (min-width: 800px); 请注意，应避免使用@import，因为每个导入的CSS文件都是渲染块。HTML的<link>标记是并行下载的，而@import则是串行下载文件。 更典型的是，您将使用@media CSS规则块在样式表中应用媒体查询，该规则块修改特定的样式。例如： /* default styles */ main […]
