---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/responsive-design'
title: '让布局适配手机 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:42:46+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  您的页面自动适配手机和平板：宽屏上列并排，窄屏上堆叠。本页演示如何接管控制。您按屏幕尺寸设置列布局，在宽屏上镜像顺序，只在某些设备上显示元素。示例将四列的行在平板上变成两两排列。
  该视频在手机上隐藏一张照片，再收窄窗口展示它消失。
tags:
  - Ontwerpgidsen
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 让布局适配手机
      description: |-
        您的页面自动适配手机和平板：宽屏上列并排，窄屏上堆叠。本页演示如何接管控制。您按屏幕尺寸设置列布局，在宽屏上镜像顺序，只在某些设备上显示元素。示例将四列的行在平板上变成两两排列。
        该视频在手机上隐藏一张照片，再收窄窗口展示它消失。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:42:46+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/responsive-design'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/responsive-design'
      description: |-
        您的页面自动适配手机和平板：宽屏上列并排，窄屏上堆叠。本页演示如何接管控制。您按屏幕尺寸设置列布局，在宽屏上镜像顺序，只在某些设备上显示元素。示例将四列的行在平板上变成两两排列。
        该视频在手机上隐藏一张照片，再收窄窗口展示它消失。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # 让布局适配手机.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [添加行](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [Mobile editing](/hc/documentation/learn-dxpr-builder/editing/mobile-editing)
- [让版块铺到边缘](/zh-hans/hc/documentation/learn-dxpr-builder/design/full-width-layouts)

您的页面自动适配手机和平板：宽屏上列并排，窄屏上堆叠。本页演示如何接管控制。您按屏幕尺寸设置列布局，在宽屏上镜像顺序，只在某些设备上显示元素。示例将四列的行在平板上变成两两排列。

该视频在手机上隐藏一张照片，再收窄窗口展示它消失。

  ## 开始之前

- 页面上有四列等宽的行；请参阅 [行和列](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)。

## 按屏幕尺寸选择布局

1. 悬停行，点击其控制栏中的网格图标。布局对话框打开在 **Medium devices (≥ 768px)** 面板。
2. 点击 **Add screen size**。第二面板打开，设为 **Extra small (< 576px)**。
3. 在该面板的下拉菜单中选择 **Small devices (≥ 576px)**。
4. 点击 **Custom Layout**，输入 `1/2 + 1/2 + 1/2 + 1/2` 并点击 **Save**。
5. 点击工具栏上的 **Save**。

四个二分之一保留全部四列，每行放两列。两列等宽的磁贴反而会在所有屏幕尺寸上把行减为两列。

## 您会看到的内容

桌面端四列仍在一行。将浏览器窗口收窄到 768 像素以下，它们两两换行。低于 576 像素，它们堆叠，每行一列，顺序与编辑器中一致。

布局从其屏幕尺寸起向上适用，直到有自己布局的更大尺寸。每个新行都以 **Medium devices (≥ 768px)** 的一个布局开始，因此其列在手机和小平板上堆叠。面板中的 **Remove screen size** 删除该布局。

## 在宽屏上镜像顺序

打开行的 **More** 菜单，选择 **Settings** 并打开 **Mirror row**。768 像素起，列倒序显示；小屏幕上按编辑器顺序堆叠。

用它做图文交替的行。在编辑器中把图片放前面，手机上图片显示在文本上方；将每隔一行镜像，桌面端图片显示在右侧。

## 按屏幕尺寸显示或隐藏元素

1. 打开元素的 **More** 菜单并选择 **Settings**。
2. 在 **HTML classes** 下从 **Responsive Visibility** 分组中选一个色块，例如 **Hidden on extra small devices, phones (<576px)**。
3. 点击 **Save**。

每个 **Hidden on** 色块只在一个屏幕尺寸上隐藏元素。每个 **Visible on** 色块只在该尺寸上显示元素，别处都隐藏。

## 屏幕尺寸

| 布局对话框中的标签 | 屏幕宽度 |
|---|---|
| **Extra small (< 576px)** | 竖屏手机 |
| **Small devices (≥ 576px)** | 大手机、小平板 |
| **Medium devices (≥ 768px)** | 平板 |
| **Large devices (≥ 992px)** | 笔记本 |
| **Extra large (≥ 1200px)** | 桌面 |
| **Extra extra large (≥ 1400px)** | 大桌面 |

一个 **Positioned layers** 元素有自己的 **Responsive** 开关，默认关闭。打开后画布高度和其中文本随窗口宽度缩放，构图保持比例。

## 如果您看不到变化

- **列在平板上仍堆叠。** 该行没有该屏幕尺寸的布局，因此 768 像素以下列堆叠。请打开行的网格图标，点击 **Add screen size** 并选择 **Small devices (≥ 576px)**。
- **元素在所有屏幕尺寸上都不见了。** 它带了两个 **Visible on** 色块，互相把对方显示的地方隐藏了。请保留一个，或用 **Hidden on** 色块，每隐藏一个尺寸用一个。
- **Mirror row 在手机上无效。** **Mirror row** 从 768 像素起有效。要更改手机上的顺序，请在编辑器中移动列。

## 接下来做什么？

- [行和列](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)：搭建您在此做响应的行。
- [在手机或平板上编辑页面](/hc/documentation/learn-dxpr-builder/editing/mobile-editing)：在小屏幕上检查和修复页面。
- [让版块铺到边缘](/zh-hans/hc/documentation/learn-dxpr-builder/design/full-width-layouts)：决定内容有多宽。