网站可能会有很小的文本，无法导航，或者没有你想要的功能就会重定向到特定于移动设备的网站。现在，在你的手机上完全访问任何网站通常是给定的;我们都不用质疑。是什么让这种戏剧性的转变成为可能?响应网页设计。

要想让网站在不同设备之间轻松地阅读和使用，就需要经过深思熟虑的、有意的设计，但通过层叠样式表(CSS)和无代码程序的新技术，这变得非常容易做到。熟练的设计师应该在整个设计过程中考虑这种适应性，而不是事后才考虑跨设备功能。在当今这个多设备的世界，响应式设计将是网站成功的最关键因素之一。

关键响应式网页设计术语

• 流体网格-网格是在列和行中有区域的元素，可以添加内容。流体网格可以设置为自动适应，也可以手动设置为跨断点进行调整。
• 灵活的图像-响应图像，可以服务于浏览器的不同大小，取决于布局中的图像的大小和观众的屏幕分辨率。确保图像响应将避免像素过小的图像或图像不必要的大，减慢网站加载。
• 断点-点在屏幕大小或方向(通知媒体查询)，网站被触发调整其布局。
• 媒体查询-特定的CSS函数，它从查看器的设备接收关于大小的信息，以触发设计中的断点。
• Viewport -用户设备上可以看到内容的可见区域。
• 溢出—设计中存在于视口之外的元素，或对其容器来说太大的元素。
• 固定的大小-大小总是相同的，不管其他因素影响你的网站或布局(像素)。固定大小没有响应。
• 相对大小-大小的变化，以响应另一个元素在您的布局或用户的设备(%，em或rem，字符高度，视口高度，或视口宽度)。相对大小是响应性的。
• 移动优先——这是一种设计策略，即先设计最受限制的移动设备，然后再设计更大的设备，这与之前假设的设计桌面设备的过程相反，然后再从那里缩小。它的目的是推动设计师优先考虑成功的、可访问的移动设计。
• 汉堡菜单-一个菜单按钮，为导航栏链接启用下拉功能，有助于在有限的设计节省空间。它的形状由堆叠的线条组成，其外观类似于……一个汉堡包。

什么是响应式网页设计?

响应网页设计创建网站，通过调整他们的布局和功能，以一种美学和易读的方式显示内容，无论屏幕的大小和比例。

这个词是在2010年由伊桑马克特，灵感来自于建筑的创作，这些建筑回应了空间内的互动或人的存在。Marcotte将响应式设计描述为由三个关键元素组成:流动网格、灵活的图像和媒体查询(使用断点)。

让一个站点响应性更好，不仅仅是简单地为手机创建一个“精简”版本的站点。随着智能手机的日益普及，移动设备已经从2010年占网络流量的2.94%，2021年占54.87%．

除此之外,许多人现在都把手机作为他们的主要上网渠道希望手机网站能够无缝衔接，功能齐全。因此，无论你是提供信息还是运营一个网络商店，如果你想要更有效，用户都需要能够在手机上完成所有的事情。

近年来，无代码程序已经彻底改变了响应式网页设计，甚至更进一步，它使同时设计不同屏幕尺寸而不需要自己编码调整成为可能。

响应式设计vs.适应性设计

自适应设计是创建一个独立的，更轻的，更精简的移动优化版本的网站。当浏览移动，它可以看到当你重定向到一个移动子域名-如m.website.com或mobile.website.com。它是在2011年出版的《适应性网页设计:用渐进式增强创造丰富的体验》一书中提出的。虽然流行了很多年，但它现在正逐步被淘汰，取而代之的是响应式方法。

适应性网页设计确实有一定的优势。手机网站可以根据设计师希望手机用户看到的内容和方式进行特别定制，对于需要大量精细控制的复杂网站来说，手机网站仍然是更好的选择。挑战在于创建两个(或更多)独立站点所需的开发时间和资金。

因此，响应式设计对于希望为用户提供统一、无缝体验的中小型企业和个人来说可能会更好。

响应式网页设计的基本要素

一个成功的响应式网站设计会涉及到几个影响网站美观和功能的关键元素。第一步是要意识到访问站点的多样性——包括设备和用户的独特需求和习惯。从那里，内容和结构的每个元素都可以响应这些不同的情况。

针对不同设备的设计

你的网站应该准备好适应多种屏幕尺寸和尺寸——台式机、笔记本电脑、平板电脑、手机(这么多不同尺寸的手机)。最好将其视为一个流动的频谱，而不是单独的类别，因为现在的设备有各种各样的尺寸和比例。此外，当在手机上观看时，用户可能会在横向和纵向之间移动，这将是你想要调整为以及。

考虑不同的设备对用户与站点交互的影响。例如，在移动设备上，你的网站如何响应滑动和缩放等手势功能?在桌面上，用户可能不会最大化浏览器窗口——当他们把窗口变大或变小时，会是什么样子?

要记住的一个重要因素是未来设备的可能大小和比例。为了避免每次技术更新或发明都刷新您的站点，从一开始就建立灵活性和流动性。

最终，内容流应该由设备决定，而不是反过来。

相对长度单位

您使用的长度设置是使您的网站能够响应的基本元素。绝对单位(如像素)不允许你的设计响应不断变化的设备大小，也不允许用户根据自己的访问需求调整文本。”绝对没有绝对单位网页设计师Nick Gard说。

对于响应式设计，使用viewport-relative units，如vh或vw，或字体-relative units，如em或rem。这将随设备或字体大小的变化而变化，并保持您的网站的功能，无论您的布局如何变化。

布局

网站的整体布局是保持网站在不同设备之间的外观和可读性的关键。考虑到列、网格、负空间和页面的流动。随着视口的缩小，内容应该回流，使您的布局更垂直。

将灵活的网格与相对长度单元结合在一起，可以在保持逻辑结构的同时改变布局。设置min-width、max-width、min-height和max-height属性可以使这些更改保持可控和有意的。

在笔记本电脑上，多栏可能是易读和吸引人的，但在移动屏幕上，它可能会使你的内容看起来拥挤，使文本太小而难以辨认。这就是流体网格特别有用的地方。随着通过的断点越来越小，列的数量也会相应减少。

导航

不仅会导航在不同的设备上看起来不同，但用户与它的互动方式将发生重大变化。例如，在带有触控板的笔记本电脑上，屏幕顶部或侧面的导航条感觉很自然，很容易使用。平板电脑可能也是如此。但一旦设备小到可以单手拿着，用户就会期待单手操作的功能。这意味着当到达移动断点时，将导航栏放在屏幕底部，从而启用拇指导航。建议拇指的大小是相当于48 dp．

在更大的屏幕上，沿着导航条的长度显示导航选项会使其更有效更多的发现．然而，随着屏幕变得越来越小，可见区域变得越来越有价值，您可能想要将导航压缩成类似汉堡包菜单的东西。这也意味着按钮可以更大，更容易用手指使用。

图片

使用响应式图像，以确保图像的分辨率与您的网站，以避免过大的文件减缓加载时间。

图像还需要作为视觉元素与布局一起缩放。考虑图像与其他内容的关系。它们是信息性的还是装饰性的?这个功能是如何影响图像缩放的?背景图像溢出屏幕可能看起来很好，但如果信息图的一半被切断或太小而无法阅读，那么它就没有多大帮助。

文本

文本对于响应式网页设计的成功至关重要。虽然布局奇怪的图像看起来可能很奇怪，但格式糟糕的文本将完全破坏您的功能。确保你的文字以em或rem为单位，并且大小要便于阅读——不要小到让读者看不清，也不要大到每次只能在屏幕上显示几个字。

确保它不会在通过断点时被切断或溢出视口。考虑到所有类型的文本如何相互关联，因为它们的规模，并旨在保持良好的美学平衡之间的标题，主体段落，和功能文本，如按钮。使用相对单位，如em或rem单位，可以让你的文本比例响应。

可访问性

响应式网页设计支持可访问性。一个设计良好的网站可以响应用户的需求，而不仅仅是他们的设备，使互联网更容易成功地为更广泛的人群导航。一些用户可能会因为残疾、视力低下/没有视力、语言障碍或运动功能限制而在浏览网站时遇到困难。有一些方法可以确保他们仍然可以轻松地使用你的网站。

在设计时考虑屏幕阅读器和其他辅助设备。屏幕阅读器在处理一些非流动元素(如固定表格)时会遇到麻烦。他们也不能阅读图像中的文本，所以它将有助于确保所有文本都是段落或alt文本。在图片中添加alt文本可以让那些视觉有限的人理解你网站的视觉元素，而且它还可以被搜索引擎优化(SEO)。

使用相对单位的文本使您的网站更容易访问．当文本可以在不中断页面流的情况下调整大小时，可能需要更大文本的低视力用户将更容易阅读。移动设备上更大的按钮支持那些可能难以看到小按钮或运动功能受损而难以按下按钮的用户。考虑你的网站服务的人群和年龄群体，以及他们的独特需求可能是什么。

响应式网页设计的例子

响应式网页设计在实践中是什么样子的?看看下面的桌面和移动网站，看看这些Webflow客户是如何使用响应式设计的。

• AngelList风险
• 晶格
• 壁画
• Zendesk

此外,所有Webflow模板内置响应式设计。

无代码工具的响应式设计

无代码网页设计使得响应式设计变得容易，而不需要知道任何HTML或CSS。Webflow使程序员和那些很少或没有编程经验的人都能够使用图形用户界面构建站点，以可视化的方式进行设计，并立即看到更改通过断点的方式。

断点级联样式从基本布局向上和向下更改。从那里，特定的设计元素可以在更大或更小的断点中进一步调整，而不影响原来的基本布局。这可以通过单击导航中的断点或者直接单击并拖动视口大小来查看。

Flexbox布局可以可视化地构建和操作，是创建更复杂的响应性页面的强大工具。响应式图像内置在Webflow中，因此不需要创建多个分辨率文件，为设计师节省了大量时间，并确保网站尽可能快速有效地加载。

Webflow将在网站构建时编写CSS，产生的代码将是精简和干净的，确保响应性更改和详细的说明不会破坏网站。它也是面向未来的，可以预见并随着新设备的开发而改变。

教程之类的Webflow大学结合视觉界面，让任何经验级别的设计师都能轻松学习和游戏。还有一个由设计师、程序员和无代码极客组成的大型网络，他们可以创建模板和教程，寻求支持和灵感。

响应式网页设计的无代码未来

随着互联网设备的普及和多样化，以及互联网的可访问性嵌入到我们日常生活的更多方面，在编码时考虑到响应式网页设计是更重要和更具有挑战性的。无代码设计意味着您总是响应式设计，而不是作为一个附加组件或事后考虑。它允许所有类型的设备都具有复杂性，并着眼于未来的复杂性。

网站正变得越来越强大，而我们用来创建网站的工具也需要随着网站的发展和完善而不断完善。有了无代码解决方案，设计师无需编写一行代码就能做出你想要的设计，并从一开始就以一种全面、复杂的方式在设计过程中构建响应性。