响应式设计的演变
通过响应式网页设计，您的网站可以自动适应任何设备或浏览器。无论您的受众是使用智能手机还是在台式电脑上工作，他们都能获得一致的体验。
在响应式设计早期，网页设计师通常从桌面版本开始，然后为移动设备和平板电脑调整设计。使用断点来区分桌面、移动设备和平板电脑仍然是响应式设计的核心部分，但如今设备类型如此之多，以至于为每种可能的辨率进行设计变得不切实际。
2018 年，最常见的显示分辨率 (360x640) 被 23% 的用户使用。现在，没有任何一个单一分辨率的市场份额超过 8%。
来源：Statcounter
使用堆栈进行自动调整大小是另一种选择。（我们将在下一节更深入地探讨堆栈。）通过将您的设计转换为堆栈，布局可以自动调整更改，而无需手动调整断点。您还可以使用流体网格布局、相对定位以及响应式图像和排版等工具。
如何使用 Framer 构建响应式网站
掌握响应式设计技术，您可以构建出在任何设备上都能完美展现的网站，从而取悦用户。
1. 从线框图开始
在 Framer 中制作线框图与传统设计工具不同。Framer 的组件从一开始就是响应式的，而不是创建需要稍后为不同屏幕尺寸重建的静态模型。
该平台的组件库拥有预构建的元素，可以自动适应不同的屏幕尺寸。
导航菜单为移动视图自动转换。
主视觉部分智能调整大小。
内容块根据可用空间重新排列。
这让您可以专注于设计结构和层次结构，而不是陷入技术细节。
在构建线框图时：
保持导航简单直观。
关注内容层次结构——用户需要先看到什么？
考虑元素在小屏幕上如何堆叠和重新排列。
使用 Framer 的预构建组件来加快流程。
从基本内容块开始，然后逐渐增加复杂性。注意导航元素，因为它们通常需要在移动端和桌面端视图之间进行重要的调整。
Framer 可以轻松地为不同屏幕尺寸创建不同的导航版本。
2. 为响应式设计定义断点
断点是响应式设计的基础。但任何与 CSS 媒体查询搏斗过的人都知道，它们也可能很难处理：在 768 像素时看起来不错的东西，在 767 像素或 769 像素时可能会损坏。
Framer 将这个传统上技术性的过程转化为直观的视觉体验。例如，Framer 的可视化断点编辑器允许您拖动手柄来设置断点，同时实时观察您的设计适应情况。您还可以使用 Framer 的响应式预览模式立即查看您的设计在不同屏幕尺寸下的外观。
Framer 最强大的功能之一是断点继承。它是这样工作的：当您对主要布局进行更改时，这些更改会自动级联到其他屏幕尺寸，从而节省了数小时的重复工作。
您还可以针对特定屏幕尺寸（如移动设备）进行特定调整，这些调整会覆盖您的继承设置，而不会影响其他屏幕尺寸。
3. 采用移动优先的方法
如今，移动流量主导着网络，占总流量的 61%。因此，以桌面为先的旧方法已不再合理。相反，应先为移动设备设计，然后再调整为桌面设备。这种反转有一个额外的好处：由于为小屏幕设计时空间较少，您必须从设计过程一开始就对要包含的内容做出战略性决策。
Framer 使您可以轻松地将移动设备设置为默认布局，然后逐步增强您的设计以适应更大的屏幕。
这可能看起来像：
将单列布局扩展为多列。
在更大的屏幕上显示更多内容。
为桌面用户添加更复杂的交互。
将移动导航模式转换为桌面友好的版本。
调整字体排版比例以提高可读性。
优化图片布局和裁剪，以适应不同的屏幕尺寸。
导航是移动响应式设计最具挑战性的方面之一，但 Framer 使其变得易于管理。您可以轻松实现像汉堡菜单和底部导航栏这样的移动模式，然后让它们在桌面上转换为全菜单栏——同时保持品牌一致性和用户体验。
4. 创建流体网格布局
Framer 的网格布局消除了响应式网格的复杂性，取而代之的是直观的视觉系统。自动布局功能自动处理响应式设计中的许多常见挑战，例如保持元素之间的一致间距，并确保布局调整时正确对齐。
Framer 的网格系统允许您：
在不同断点处指定列数。
控制元素如何跨列。
管理元素流和大小调整。
自动调整间距。
Framer 网格系统最强大的功能之一是它能够处理动态内容，如 CMS 集合、用户生成内容或动态图像。当您上传新项目时，Framer 的网格系统可确保您的布局保持与您最初设计时一样美观。
5. 使用堆栈和相对定位
虽然网格处理整体页面结构，但 Framer 的堆栈则管理该结构中的元素如何相互关联——所有这些都无需手动定位或复杂的代码。
堆栈是智能容器，可自动处理元素之间的间距和对齐。您可以水平（一行）或垂直（一列）排列元素，并且您的堆栈将随着屏幕尺寸的变化保持适当的间距。
关键是相对定位：堆栈允许元素根据其容器和相邻元素调整其位置，而不是将元素固定到特定坐标。
堆栈的常见用途包括：
在桌面和移动设备之间无缝转换的导航菜单。
无论内容如何，都保持一致间距的卡片布局。
输入和标签完美对齐的表单界面。
干净地适应任何屏幕尺寸的内容部分。
堆栈的真正强大之处在于它们相互嵌套时。您可以将水平堆栈和垂直堆栈组合起来，每个堆栈都有自己的自动布局属性，例如“填充容器”和“拥抱内容”，从而创建复杂的布局。
提示：您可以在Framer 学院了解有关堆栈和网格之间区别的更多信息。
6. 优化图片和字体排版
Framer 的响应式图片处理方法超越了简单的缩放。您可以利用延迟加载来优化图片传输以提高性能，自动生成响应式图片源集，以及动态裁剪工具，这些工具可以在图片调整大小时保持对重要部分的关注。
Framer 的工具通过以下方式确保您的图片在任何尺寸下都美观：
为不同设备提供适当的图像尺寸。
尽可能使用 SVG，以实现清晰缩放。
提供可调节的定位和尺寸。
Framer 的排版系统允许您在不同断点上管理字体大小、行高和间距。它还优化了字体加载，以防止布局偏移，即使在自定义字体加载时也能保持文本可读性。
为了避免响应式设计出现问题，您可以设置平滑缩放的流体字体大小。您还可以启用最小和最大大小，这样文本永远不会变得太小或太大。
借助 Framer 的“适应文本”功能，您可以设计引人注目的标题和段落，它们可以随浏览器或部分的尺寸而调整大小。
在发布前测试您的网站响应性
Framer 提供两种强大的方法，让您在发布前测试网站的响应性。
利用 Framer 内置的预览模式，无需离开编辑器即可在不同设备上检查您的设计。您可以快速发现并修复响应式问题，测试交互，并验证您的布局如何处理不同文本长度和图像尺寸等可变内容。
虽然预览模式非常适合快速迭代，但在发布前在实际设备上进行测试是无与伦比的。使用 Framer，您可以共享可在任何设备上打开的预览链接。在各种智能手机、平板电脑和显示器上与您的设计进行交互，有助于确保一切按预期工作——并在您将新网站发布到世界之前发现错误。
让您的网站在任何地方都完美运行
响应式设计不会过时。事实上，随着屏幕尺寸的演进和新设备的出现，它变得越来越重要。Framer 以一种面向未来的网页设计方法让您走在前沿，适应未来出现的任何情况。您将不再受限于僵化的布局，而是拥有创建流畅、响应式体验的灵活性，让用户愉悦并在任何地方都完美运行。
准备好无需编码即可创建响应式网站了吗？探索Framer 的模板以启动您的响应式设计，访问我们的图库查看其他用户创建的响应式网站，并注册免费的 Framer 帐户，立即开始构建响应式网站。