EverWeb中的响应式网页设计：让您的页面适合所有设备

响应式Web设计是在EverWeb中构建一个在所有设备上保持一致的网站的好方法。您只需要设计一个适合所有设备类型的页面。您不再需要在您的网站中开发和维护单独的移动页面。然而，权衡的是，您必须比以前更加关注页面设计。
在开发您的网站时，可能更容易想到设计用于台式计算机的页面而不是为移动设备设计页面。这是有道理的，因为当您将页面缩小到移动设备大小时，可能更容易将对象从设计中取出，而不是在从移动页面向桌面页面大小放大时将对象添加到页面中。
这种设计方法通常很好，但在移动设备上查看页面时可能会出现一些问题。您可能会发现页面水平滚动超出移动设备的右边缘，从而在页面右侧创建间隙。

EverWeb for Mac(网页设计软件)

立即下载

EverWeb Mac版是一款Macos上的网页设计软件，你能想像吗——通过 EverWeb ，一系列的拖拽操作即可创建一个专业的网站！不管是公司项目，还是出于个人爱好，你都可以完全地自由地设计一个完美的网站。

2022-12-2271.87 MB简体中文

是什么导致页面水平漂移？
理想情况下，页面应该适合显示在其上的所有设备的水平尺寸。基本问题是在移动设备上，正在使用桌面页面宽度，因此页面不会以响应方式运行。有几种简单的方法可以解决这个问题，我们将在稍后介绍，但首先，重要的是要首先讨论问题是如何引起的。
保留最小设备宽度
设计响应式页面时需要注意的一个重要因素是您正在设计的最小设备的宽度。通常，您的网站将显示的最小设备类型将是iPhone SE。iPhone SE的水平显示宽度为320像素，因此在设计网页时请考虑此值，因为它有助于使您的网页完全适合绝大多数设备，包括移动设备和桌面设备。
您通常不需要考虑最大页面宽度，除非页面上的对象间距过宽。我们的博客“ 使用内容最大宽度 ”详细介绍了YouTube上的视频内容最大宽度。
将全宽对象添加到页面时，无需考虑最小设备宽度，因为此类对象会自动缩放到可用的屏幕宽度。但是，在某些情况下，您可能需要检查Metrics Inspector中是否仍选中了“Full Width”复选框。使用“响应行”窗口小部件时，“全宽”复选框可以取消选中。例如，在“响应行”窗口小部件（例如“文本”部分，“FlexBox”或“导航菜单”窗口小部件）中添加全宽度窗口小部件时，请务必确保仍然选中“全宽度”复选框，如果您仍希望该对象为全屏宽度。
通常，您不需要将全宽度对象添加到“响应行”窗口小部件中，但可能存在您可能希望执行此操作的特定实例。
如果“响应行”窗口小部件内的对象不是全宽，则实际上它将是固定宽度的对象。因此，例如，如果您有一个1000像素宽的FlexBox小部件，则在iPhone SE上您可以在页面上水平滚动1000像素。
要解决此问题，请选中“度量标准”检查器中的“全宽”复选框以使对象全宽或将FlexBox窗口小部件的宽度减小到320像素或更小。
不同设备类型的最小设计宽度
您可能认为页面上的对象现在限制为最大宽度为320像素。实际上，情况并非如此，因为某些小部件会根据正在查看页面的设备自动缩放内容。
FlexBox和Text Section小部件是自动缩放的很好示例。例如，在FlexBox小部件的窗口小部件设置中，将“最小宽度”，“默认宽度”和“最大宽度”值设置为“100％”。这将在所有设备类型上正确缩放图像。这就是你需要做的一切！
在不同的设备类型上使用Show On Device
如果您没有使用上面提到的小部件，则可能需要一种替代方法来确保所有设备类型上的对象以正确的大小显示。这是指标检查器中的“在设备上显示”非常有用的地方。例如，您希望在所有设备类型上正确显示“响应行”窗口小部件中的图像。选择图像并在Metrics Inspector中将其设置为300像素宽，然后在“响应”部分中选中“在移动设备上显示”。取消选中其他三个Show on Device选项。图像可能会消失，因为它只能在移动设备上看到。您可以使用Window-> Show Hidden Objects菜单查看图像轮廓。此外，如果您减少编辑器窗口的宽度，将显示图像。
将资产列表中的相同图像添加到“响应行”窗口小部件中。这次使其宽600像素。在Metrics Inspector的“响应”部分中，选中“在平板电脑上显示”并取消选中其他三个选项。同样，图像可能会消失，但如果您设置了“显示隐藏对象”菜单选项，您将看到其轮廓显示。
最后，第三次添加相同的图像，使其宽775像素。选中“在桌面上显示”和“在宽桌面上显示”。取消选中其他两个选项。
当您预览页面时，您会注意到缩小浏览器窗口的大小时，响应行中的图像将适合所有设备大小，即移动设备上宽300像素，平板电脑宽600像素桌面和宽屏桌面设备上宽775像素。
测试您的响应页面
完成后，建议您在Safari的响应式设计模式下预览页面。Safari可能是最好的响应式设计浏览器功能。要在Safari中启用它，请转到Safari->首选项菜单。单击“高级”按钮，然后选中“在菜单栏中显示开发菜单”框。关闭“首选项”对话框。现在，您将在Safari的菜单栏中看到“开发”菜单。使用开发 - >输入响应式设计模式菜单选项，根据不同的设备类型测试您网站的页面。
响应式设计可能具有挑战性，但通过一些思考和创造，可以轻松解决水平页面漂移等问题。