移动和响应式设计

响应式移动网站模板

响应式模板是网页设计行业中一种流行的设计方法，因为并非所有内容管理系统 (CMS) 都能提供专门的移动模板选项。响应式设计意味着模板经过特殊设计，能够根据不同的浏览器窗口宽度自动调整布局。由于每个元素都需要单独设计，用户自行编辑响应式模板可能会比较困难。

例如，菜单可能会被精简，或者移到页面外，并在需要时再显示。响应式网站在移动设备上的加载速度通常较慢，因为移动设备需要下载桌面版中使用的所有样式/主题，即使这些样式/主题在移动版中并未使用。一些网页设计师专注于制作美观的模板，却忽略了这些加载速度问题。

如果您的网站面向旅游用户，您的客户可能身处手机信号覆盖范围之外，他们可能难以下载所有移动端体验不需要的额外 JavaScript 和 CSS 库。响应式模板的下载速度通常较慢，但我们一直在努力提升新响应式模板的加载速度，其渲染速度比普通 WordPress 主题快约 3 倍。我们的响应式网站支持自定义颜色、字体和图片。

专用移动网站模板

专用的移动网站模板是我们为所有桌面网站提供向后兼容性的传统方式，旨在为您的客户提供移动体验。移动模板使用与桌面网站相同的导航站点地图和内容。但是，我们精简了所有不必要的元素，确保您的客户能够快速找到所需信息。例如，他们可以轻松地在小屏幕上访问您的联系方式、查看地图链接或浏览产品并进行购买。随着时间的推移，我们添加了横幅、徽标，并自动匹配了与桌面模板相同的颜色。通过对专用移动模板设计的精细调整，您的客户将获得绝佳的体验，因为这种方法是…… 最快的选择 适用于使用速度较慢的农村移动网络连接的用户。

完全独立的移动网站

专门为移动设备打造的网站或许一开始能带来非常好的移动体验，但网站管理员往往会忘记维护（或者根本无力维护），导致两个网站的信息不同步。如果您运营的是在线购物网站，那么您的移动端和桌面端体验必须使用同一个购物车引擎。我们建议客户不要采用这种做法。

如何将现有网站转换为响应式模板

我们提供多种响应式模板供您选择，并且会不断更新。切换到响应式模板后，您的桌面和移动设备布局都会同步更新。

1. 在内容管理系统中，转到“设计”选项卡
2. 选择“更改主题”
3. 浏览所有主题，并留意“响应式”或“移动端”按钮。点击此按钮即可预览主题的响应式或移动端版本。只有带有“响应式”按钮的主题才是响应式模板。
4. 选择一个主题继续。
5. 如果您想保持现有品牌元素不变，请取消勾选更改横幅、徽标、背景和颜色的复选框。
6. 勾选此框以备份您的旧设计设置，以防万一出现问题。
7. 保存主题更改。
8. 有时，由于浏览器缓存设置，在更改主题后预览网站时，网站可能显示不正确。您可能需要发布网站并清除浏览器缓存，才能看到正确的显示效果。
9. 有时您可能需要重新应用菜单等的颜色设置，因为有些模板提供默认颜色，而有些模板不提供，或者您的颜色组合可能与模板不兼容，需要进行一些微调。

如何选择新的专用移动模板

我们有 8 款不同的专用移动模板，但每款模板都会使用您桌面主题的颜色和字体。

1. 在内容管理系统中，转到“设计”选项卡
2. 选择移动模板
3. 点击“选择新的手机主题”
4. 浏览所有主题，并留意“响应式”或“移动端”按钮。点击此按钮即可预览主题的响应式或移动端版本。只有带有“响应式”按钮的主题才是响应式模板。
5. 选择一个主题继续。
6. 如果您想保持现有品牌元素不变，请取消勾选更改横幅、徽标、背景和颜色的复选框。
7. 勾选此框以备份您的旧设计设置，以防万一出现问题。
8. 保存主题更改。
9. 有时，由于浏览器缓存设置，在更改主题后预览网站时，网站可能显示不正确。您可能需要发布网站并清除浏览器缓存，才能看到正确的显示效果。
10. 有时您可能需要重新应用菜单等的颜色设置，因为有些模板提供默认颜色，而有些模板不提供，或者您的颜色组合可能与模板不兼容，需要进行一些微调。

调整 CSS 使其适应移动设备

如果你懂技术，你可能想直接修改现有模板，使其变为 CSS 响应式模式。

在样式表中查找尺寸最大的为 600px、750px 或 900px 的行：

#container { width: 750px; margin: 0 auto; }

并将它们更改为这样，使其占据屏幕宽度的 90%，最大可达 960。

#container { width: 90%; max-width: 960px; margin: 0 auto; }

然后找到列，将它们的宽度或边距从固定宽度更改为百分比宽度，但仅在屏幕宽度允许的情况下应用这些宽度。当屏幕宽度小于 600 像素时，列将堆叠在浏览器的整个宽度上。

@media (min-width: 600px) { .leftColumn { width: 20%; float: left; }