让您的页面适合所有设备

资料来源：网络整理时间：2023/3/22 4:24:33 共计：3614 浏览

　　自适应响应式Web设计规划是在EverWeb中构建一个在所有设备上保持一致的网站站点的好方式方法。您只需要设计规划一个适合所有设备分类类型的网站页面。您不再需要在您的网站站点中建设开发和管理维护单独的移动网站页面。然而，权衡的是，您必须比以前更加关注页面设计及制作。

　　在建设开发您的网站站点时，可能更容易想到设计规划用于台式计算机的网站页面而不是为手机端移动设备设计规划网站页面。这是有道理的，因为当您将网站页面缩小到手机端移动设备大小时，可能更容易将对象从设计规划中取出，而不是在从移动网站页面向桌面网站页面大小放大时将对象增加添加到网站页面中。

　　这种设计规划方式方法通常很好，但在手机端移动设备上查看网站页面时可能会出现一些问题。您可能会发现网站页面水平滚动超出手机端移动设备的右边缘，从而在网站页面右侧创建间隙。

　　EverWeb for Mac(页面结构网页设计软件)

　　EverWeb Mac版是一款可以在苹果电脑MAC OS第三方平台上使用的页面结构网页设计软件，你能想像吗——通过 EverWeb ，一系列的拖拽操作即可创建一个专业的网站站点！不管是公司企业项目，还是出于个人爱好。

　　是什么导致网站页面水平漂移？

　　理想情况下，网站页面应该适合显示在其上的所有设备的水平尺寸。基本问题是在手机端移动设备上，正在使用桌面网站页面宽度，因此网站页面不会以响应方式运行。有几种简单的方式方法可以解决这个问题，我们将在稍后介绍，但首先，重要的是要首先讨论问题是如何引起的。

　　保留最小设备宽度

　　设计规划自适应响应式网站页面时需要注意的一个重要因素是您正在设计规划的最小设备的宽度。通常，您的网站站点将显示的最小设备分类类型将是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的菜单栏中看到“建设开发”菜单。使用建设开发 - >输入自适应响应式设计规划模式菜单选项，根据不同的设备分类类型测试您网站站点的网站页面。

　　自适应响应式设计规划可能具有挑战性，但通过一些思考和创造，可以轻松解决水平网站页面漂移等问题。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：做企业品牌网站，建网站多少钱，这样算全清楚了! | ·下一条：通州响应式网站建设有哪些优点？想做一个高质量的网站看过来。