编辑移动端版本

WordPress 站点采用响应式设计，没有单独的移动端版本可供编辑。在本指南中，您将学习如何使用区块设置和 CSS 自定义您的内容在移动设备上的显示方式。

“导航”区块包含移动端菜单按钮（即“汉堡”图标）的设置选项。要自定义移动端菜单，请执行以下步骤：

1. 从您站点的仪表盘导航至“外观 → 编辑器”。
2. 选择包含您的导航菜单的模板或模板部分。
3. 打开“列表视图”，然后选择“导航”区块。
4. 在区块设置边栏中，点击设置图标（齿轮图标）。

5. 在“显示”部分：
   • 切换“显示图标按钮”以使用汉堡图标或显示“菜单”文本。
   • 选择您的图标样式（两行或三行），并使用“叠加菜单”设置选择何时显示汉堡图标。

了解关于设计站点菜单样式的更多信息。

某些布局区块可让您控制内容在移动设备屏幕上是否垂直堆叠。默认情况下，WordPress 会在较小屏幕上自动将并排内容堆叠显示，以保持可读性。

要调整堆叠行为，请按照以下步骤操作：

1. 从您站点的仪表盘导航至“外观 → 编辑器”。
2. 编辑包含您要调整的区块的页面或模板。
3. 打开“列表视图”，然后选择该区块。
4. 在区块设置中，开启或关闭“在移动端堆叠显示”。

具有“在移动端堆叠显示”设置的区块：

• 列
• 媒体和文本
• 新近 Instagram 文章

将按钮和菜单换行到多行显示，而非强行挤在一行，可以提升其在移动端上的可读性。默认情况下，多行换行设置处于关闭状态。

要启用换行，请按照以下步骤操作：

1. 从您站点的仪表盘导航至“外观 → 编辑器”。
2. 编辑包含您要调整的区块的页面或模板。
3. 打开“列表视图”，然后选择该区块。
4. 在区块设置中，开启“允许换行到多行”。

具有“允许换行到多行”设置的区块：

• 按钮
• 共享按钮
• 导航
• 社交图标
• 评论数
• 行和堆栈

以像素 (px) 为单位设置的文本大小会固定不变。以 em 或 rem 为单位设置的文本大小会根据访客的设置和屏幕大小调整，让您的站点在不同设备上更易访问且更易阅读。

要将文本单位从像素更改为相对单位，请按照以下步骤操作：

1. 点击包含您要调整大小的文本的区块。
2. 在区块设置中，找到“排版”部分。
3. 在“字体大小”下，点击自定义大小图标（两条带点的水平线）。
4. 点击“px”单位，将其更改为“em”或“rem”。
5. 输入一个数值，然后根据需要进行调整。

在 em 和 rem 之间选择：

• em — 文本大小会根据容器调整（适用于说明文字、标签或特定区块内的文本）
• rem — 文本大小在整个站点中保持一致（适用于正文、标题和按钮）

您还可以自定义全站字体大小，而非调整单个区块。

本指南的此部分适用于使用我们 WordPress.com 高级版、商务版和电商版套餐以及旧版专业版套餐的站点。对于使用免费套餐或个人版套餐的站点，请升级您的套餐以使用此功能。

您可以使用 CSS 类在桌面设备或移动设备上隐藏特定区块。要进行此项设置，请按照以下步骤操作：

1. 编辑包含您要隐藏的区块的页面、文章或模板。
2. 通过点击或在“列表视图”中选中来选择该区块。
3. 在区块设置中，点击“高级”。
4. 在“其他 CSS 类”文本框中，输入 hide-desktop 或 hide-mobile：

5. 导航至您站点的自定义 CSS 设置：
   • 区块主题：“外观 → 编辑器 → 样式 → ⋮ → 其他 CSS”
   • 经典主题：“外观 → 自定义 → 其他 CSS”
6. 粘贴以下代码，然后点击“保存”：

/* hide elements on mobile*/
@media (max-width: 768px) {
 .hide-mobile { display: none !important; }
}
/* hide elements on desktop*/
@media (min-width: 769px) {
 .hide-desktop { display: none !important; }
}

您只需将 CSS 代码添加到站点一次。之后，您可以将 hide-mobile 或 hide-desktop 类添加到任何区块，CSS 将自动在指定设备上隐藏该区块。