响应式网页设计使您的网站能够适应用户正在查看的设备。网站布局会根据屏幕大小和设备功能动态更改。直到最近，响应能力还是一个好处，但现在它是良好网页设计的重要组成部分！
在本博客文章中，我们将介绍响应式 Web 设计的基础知识，探索使网站响应式设计的设计原则。如果您是探索此概念的初学者，此处介绍的基础知识将帮助您入门。创建适用于多个设备 （台式机、手机或平板电脑） 的网页！
什么是响应式 Web 设计，为什么它很重要？
如果要创建网站，则应该知道，观看者可能会从屏幕大小不同的各种设备访问该网站。越来越多的网络浏览器使用手机或平板电脑查看网页。
在下面的示例中，该网站被设计为响应。如您所见，布局和内容会根据屏幕大小和分辨率进行调整。
如果您的网站没有响应，则内容将不会在显示大小受限的屏幕上布局良好。因此，网页布局必须适应以适应设备。
只是关于各种屏幕大小吗？
目标不仅是使其灵活，而且还适应呈现网页的设备。屏幕大小是主要因素，但还有其他考虑因素，如显示像素密度、触摸屏是否等。
您的目标应该是设计一个网站，在任何设备上工作良好，无论视口尺寸、分辨率或用户如何与其交互。您应该规划和创建布局、媒体，甚至导航，以便在每台设备上获得最佳可用性。
伊森·马科特 – 响应式网页设计之父
当您听到响应式 Web 设计时，您可能倾向于将其视为设计标准或技术。然而，这个术语不是这个术语。它是指在创建网页时应遵循的一组设计原则，以便使其流畅。
伊森提出了这个术语并奠定了原则，并俗称响应式网页设计之父。伊森·马科特提出了一个设计原则，它巧妙地使用CSS在不同的屏幕大小上呈现同一个网页，而不会影响其可读性或可用性。
响应式网页设计的三个基本要素
使用 CSS 媒体查询自定义样式
过去，Web 设计人员依赖于"用户代理嗅探"来动态地为不同的 HTML/CSS 代码提供服务或依赖 URL 重定向。CSS3引入了一种叫做"媒体查询"的新技术。
使用@media规则，在验证特定条件后，可以包含特定的 CSS 属性块。您可以检查以下条件：
- 视口宽度/高度
- 设备宽度/高度
- 方向（纵向/横向）
- 分辨率
您可以根据设备类型检查条件并使用媒体查询来传递特定的样式块。
媒体查询的语法
@media not|only mediatype and (expressions) {
CSS-Code;
}
媒体查询示例
有很多例子和一个方便的"自己试试"编辑器，可在W3Schools网站上找到。
在下面的示例中，@media查询用于检查视口宽度是否为 375px 或更多。如果超过 375px，菜单将显示在内容上方，如果小于 375px，则菜单将浮动到左侧。
@media screen and (min-width: 375px) {
#leftsidebar {width: 150px; float: left;}
#main {margin-left:220px;}
}
流体网格为基础的布局
术语"Fluid Grid"描述了一种布局，其中，您不是使用固定像素值，而是以其他元素的相对比例对它们进行编码。因此，组件流动（流动性）并适应设备。
在传统布局中，您将使用固定宽度网格定位元素。但是，我们现在正在处理各种屏幕大小。这种方法将导致您的网站布局不佳。让我们看一下传统的 CSS 布局方法的示例：
流体网格方法使用"相对比例"，即，您将每个元素的高度和宽度编码为百分比或相对大小。在下面的示例中，使用"百分比"方法调整组件大小：
流体图像
在响应式 Web 设计方法中，应使用 CSS 为所有图像定义最大宽度，而不是最小宽度。
通过指定最大宽度，可确保图像永远不会被像素化，超出会影响其外观质量的值。通过不定义最小宽度，您可以允许 CSS 将大小缩小到任何值（需要适合上下文）。
CSS 保持纵横比，因此图像看起来不会拉伸。
移动优先设计
2017 年，移动使用量已超过桌面使用量。截至目前，StatCounter 显示，50.87% 的用户从移动设备浏览，而桌面用户浏览用户为 44.78%。
移动使用量的增加意味着设计人员应该格外注意他们的网站在移动屏幕上的外观。因此，越来越多的设计师在设计时遵循"移动优先"规则。
"移动优先"是一种设计方法，它建议你开始设计网站，以寻找它最好的移动（因为它有最大的限制），然后扩展到平板电脑，最后桌面。
测试您的设计与模拟和研究
您将在网上找到大量的工具来模拟不同设备的各种要求并测试您的网站。在设计响应式网站时，应使用此类工具在各种设备上模拟和测试网站的外观和行为。
Firefox 开发人员工具 + 响应式设计模式
Firefox 提供了一个开发人员工具来切换响应式设计模式开/关。启用后，您可以将内容区域设置为特定的屏幕大小，如下图所示。您可以模拟各种大小并测试网页。
Chrome 开发人员工具 + 设备模式
如果您喜欢 Chrome 开发人员工具，请使用设备模式模拟各种屏幕尺寸和分辨率。在启用设备模式后测试网页，确保您正在构建一个完全响应的网站。
该工具非常强大，还允许您模拟地理位置坐标，模拟设备方向。您还可以模拟各种浏览器，以测试网页在其他 Web 浏览器上的显示/运行方式。
如果您需要响应式网页设计方面的帮助，DayDigital 可以帮助您！我们已经帮助几家企业建立了令人惊叹的网站，并标记他们的在线存在。立即联系我们，免费咨询！
