优化对桌面不产生影响的移动设备设计？

为什么移动设备上的更改会影响桌面设备？

GemPages 的运营平台是 响应式设计原则。这意味着页面上的元素会自动调整以适应不同的屏幕尺寸。

当您移动或调整移动设备元素的大小时，它也可能会改变桌面布局，因为它是代码中的相同元素。

您需要应用特定的技术来隔离每个设备的设计。

移动专属定制的关键技术

要设计仅适用于移动设备的布局而不破坏桌面环境，请考虑使用 GemPages 中的以下技术之一，包括：

• 可见性设置
• 响应式布局选项
• （高级） 自定义CSS

1. 可见性设置

此功能允许您显示或 隐藏不同的元素/部分 在特定设备（台式机或移动设备）上访问您的商店。

计费示例：

您创建两个部分，A 和 B。部分 A 专为桌面用户设计，而部分 B 针对移动设备进行了优化。您可以将部分 A 设置为仅在桌面上显示，将部分 B 设置为仅在移动设备上显示，以确保每个部分都针对相应的设备进行量身定制，而不会干扰其他部分。

优点：

• 它允许您创建针对每种屏幕尺寸优化的独特布局。
• 可以轻松定制，并且不会影响其他部分。

限制：

从技术角度来看，您的页面内容是重复的。虽然这不会显著影响加载速度，但还是需要注意。

注意： 最好将此技术的使用限制在需要针对每台设备进行最多定制的 1-2 个重要部分（例如首屏部分）。

有关在每个设备上显示/隐藏元素和部分的更多详细信息，请参阅 本文.

2. 元素特定的调整

GemPages 让您 调整元素的显示方式 根据屏幕尺寸。

这些设置包括调整字体大小、对齐方式、颜色、边距、填充、背景等的选项。

计费示例：

您可以增加移动设备上标题的字体大小以提高可读性，同时保持桌面版本不变。

限制：

您只能调整元素的外观，而不能调整其位置。 

如果您在移动设备上移动某个元素，它也会在桌面版本上移动，因为该元素在整体布局中仍处于相同的位置。

3. 响应式布局

通过使用 GemPages 的列和行设置，您可以 在桌面的水平布局和移动设备的垂直布局之间切换。 

这有助于确保设计简洁、有序，且适合任何屏幕尺寸。

计费示例：

您可以设置列在桌面上并排显示，但在移动设备上垂直堆叠以便于导航。

优点：

• 这种方法可以轻松创建在桌面和移动设备上看起来都很棒的布局。
• 您可以重新排列行内的列，从而为您的设计提供更多灵活性。

限制：

您只能更改整个列的位置，而不能更改列内的单个元素的位置。

4. 高级定制：使用自定义 CSS 进行移动端定制

如果您对 CSS 有深入的了解，则可以通过添加自定义 CSS 代码将移动优化提升到一个新的水平。这样您就可以针对移动设备微调特定元素的样式和外观。

计费示例：

您可以编写自定义 CSS 来更改按钮的样式或专门针对移动设备调整元素的间距。

优点：

完全控制任何元素的样式，使您能够进行高度具体的调整。

限制：

需要了解 CSS。如果没有这些知识，有效实现自定义可能会很困难。

如何针对移动设备进行优化设计？

为了有效优化您的设计，我们建议采用以下方法：

• 从桌面开始

首先，设计桌面版布局。移动版布局将继承桌面版内容结构，因此从这里开始可以打下坚实的基础。

• 调整按键设置

使用特定元素的调整和响应式布局技术来修改移动设备的字体大小、颜色、边距、填充和对齐方式。

• 如果需要，应用可见性设置

如果您需要与桌面完全不同的移动布局，请考虑使用 可见性设置 创建仅限移动设备的部分。

例如，下面是使用“高级”选项卡中的“可见性设置”的分步示例：

第三步： 切换到移动视图

完成桌面设计后，单击 GemPages 顶部工具栏中的移动图标即可预览页面在移动设备上的外观。

第三步： 复制部分

右键单击要针对移动设备自定义的部分，然后选择“复制设立的区域办事处外，我们在美国也开设了办事处，以便我们为当地客户提供更多的支持。“

• 原版块将用于移动端优化（A节).
• 重复的部分仅适用于桌面（B节).

第四步：将一个元素设置为在移动设备上可见，另一个元素设置为在桌面上可见。这样您就可以为每个元素应用独特的样式。

第三步： In 左侧的设置面板，调整字体大小、间距等移动版本的属性。

这确保元素针对较小的屏幕进行优化，而不会影响桌面设计。

常见问题

1. 如何在 GemPages 中编辑仅适用于移动设备的页面？

使用顶部工具栏中的移动视图切换按钮切换到移动预览。然后：

• 使用特定于元素的设置来调整移动设备的字体大小、填充、边距等。
• 如果您需要单独的设计，请使用可见性设置在移动设备和桌面上显示/隐藏部分。

2. 为什么我在移动设备上所做的更改也会影响桌面布局？

GemPages 采用响应式设计结构，这意味着元素在不同设备上共享相同的位置。为了隔离移动设备上的更改，请使用“可见性设置”复制相应版块，并分别定制每个版本。

3. 让某个部分在移动设备上看起来有所不同的最佳方法是什么？

有两种推荐的方案：

• 直接在移动视图中调整样式设置（字体大小、填充、边距、对齐方式）
• 使用可见性设置来创建关键部分（如英雄或 CTA）的仅限移动设备的版本

4. 我可以为移动设备和桌面应用不同的背景图片吗？

是的。复制该版块，并使用“可见性设置”分别显示移动版和桌面版。然后，您可以在每个版本中设置不同的背景图片。