什么是响应式设计？

如果您从事工作或密切关注网络新闻，那么您可能已经听说过响应式设计。它是一种设计技术，可让使用移动设备浏览的用户获得流畅的用户体验。让我们仔细看看响应式设计是什么，以及从技术上讲它包含哪些内容。

什么是响应式设计？
响应式设计是一种方法，它表明网页设计和开发应根据所使用的屏幕尺寸和平台响应用户的行为和环境。这种做法涉及网格和灵活布局、图像的混合，以及对 CSS 媒体查询的巧妙使用。当用户从笔记本电脑移动到 iPad 时，网站应自动适应屏幕分辨率和尺寸。可能还需要考虑用户的设备设置；例如，如果他们的 iPad 上有 VPN，网站就不应该阻止用户访问页面。换句话说，网站应该拥有自动响应用户偏好的技术。这就是响应式设计！

响应式设计基于三个基本原则：

流体网格系统
无论屏幕大小如何，元素都占用相同百分比的空间。这意味着您可以选择像素出现的位置并设置布局大小，以便元素以固定方式增大或缩小。如果您使用网格系统和 CSS 生成器作为设计的基础，则最容易实现这一点。

您需要计算设计元素的最大宽度除以用户浏览准确的手机号码列表器的最大宽度。将这些百分比应用于 CSS 脚本中的必需属性时，您将获得一个独特的设计，该设计会根据用户的屏幕尺寸进行扩展或缩小。

使用流体图像
与文本不同，图像不是自然流动的。这意味着它们默认情况下在不同的屏幕上具有相同的大小和配置。一个明显的风险是，您的设计在不同设备之间看起来不一致，因为图像可能无法缩放，因此与其他元素不成比例。因此，您应该应用 CSS 命令以确保图像在较小的屏幕上缩小。如果您决定包含多个图像，则应使用不同的 CSS 命令。

媒体查询
使用这些过滤器，您可以确定用户查看设计的屏幕尺寸。这些过滤器会更改站点的布局以满足某些条件。您也可以通过 CSS 包含它们。最常用的是：

最小宽度，
最大宽度，
最小高度
和最大高度。
因此，根据屏幕的宽度、高度、方向等，您可以精确指定您的设计将如何呈现给不同的用户。

极简主义很重要

想象一下试图将相同数量的东西装入不同尺寸的手提箱：东西越少，就越容易。可用性（和性能）是极简主义界面如今如此受欢迎的原因之一。

适当优先考虑和隐藏内容
桌面屏幕尺寸提供了智能手机屏幕所没如何与行业领导者取得联系有的机动空间。利用隐藏控件，如导航抽屉。为了减少需要重构的项目数量，请尝试渐进式公开。

按钮的可点击区域较大
菲茨定律指出，按钮的可点击区域越大，用户与之交互就越容易。

如何检查我的网站是否响应？
您可以非常快速地检查您的网站是否符合响应式设计标准。要执行此操作（以 Google Chrome 为例）：

打开浏览器，
转到您要检查的网站，
按 I打开控制台，
按以不同的方式查看您的网站，
现在您可以像用户在移动设备、平板电脑或台式机上看到的那样看到它。
您还可以使用免费工具（如 Google 的移动设备友好度测试）来检查您的网站页面是否适合移动设备。虽然其他设计方法（如响应式设计）可以帮助实现移动友好度，但响应式设计因其优势而最为常见。