logo

额外区块类型 (EBT) - 全新的布局构建器体验❗

额外区块类型 (EBT) - 样式化、可定制的区块类型:幻灯片、标签页、卡片、手风琴等更多类型。内置背景、DOM Box、JavaScript 插件的设置。立即体验布局构建的未来。

演示 EBT 模块 下载 EBT 模块

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

额外段落类型 (EPT) - 类似的基于 Paragraph 的模块集合。

演示 EPT 模块 滚动

滚动

6.5. 在 Drupal 中使用 CSS。主题中的断点与响应式设置

17/10/2025, by Ivan

在之前的教程中,我们已经将 CSS 连接到了我们的主题。为此,我们在 drupalbook.info.yml 文件中指定了:

libraries:
  - drupalbook/global-styling

接着,我们创建了 drupalbook.libraries.yml 文件,在其中指定要包含的 CSS 文件:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }

从现在开始,我们将详细了解如何在我们的主题中使用 CSS。

我们在之前的文章中已经提到过,你可以在每个 CSS 文件的大括号中指定 media。例如,对于 print.css,我们指定了 media: print,这样该 CSS 只会在打印版本中加载。此外,还有 media: all(默认值,适用于所有显示模式)和 media: screen(适用于非打印模式)。

覆盖其他库的 CSS

你可以使用 libraries-override 来覆盖核心 CSS 文件:

libraries-override:
  # 替换整个库
  core/drupal.collapse: mytheme/collapse
   
  # 替换库的单个部分,例如某个 CSS 文件
  subtheme/library:
    css:
      theme:
        css/layout.css: css/my-layout.css
   
  # 移除库的部分内容
  drupal/dialog:
    css:
      theme:
        dialog.theme.css: false
   
  # 移除整个库
  core/modernizr: false

Drupal 中的断点(Breakpoints)

在 Drupal 中,断点是主题配置的一部分,它允许你根据显示网站的设备屏幕大小自定义主题的外观。这使得网站能够适配各种设备,如桌面电脑、平板电脑、手机甚至智能手表。

Breakpoint 模块标准化了断点的使用,它允许你监测设备分辨率并提供所需的断点。你只需要描述必要的断点尺寸即可。

当然,这很好,但如果仅仅在主题中配置断点,什么也不会发生。比如,你可以启用核心的 Responsive Image 模块,然后它就可以使用断点来为不同的屏幕尺寸显示不同的图片预设。让我们给我们的主题添加断点文件。

一个断点由一个标题和一个媒体查询(media query)组成。媒体查询是描述断点的标准方式。例如,对于宽度为 40em 的断点,可以写作 '(min-width: 40em)'。在这里,断点只是一个媒体查询,但断点还可以包含额外的信息。

要添加断点,你需要创建一个名为 myTheme.breakpoints.yml 的文件。因为我的主题名是 drupalbook,所以文件名是 drupalbook.breakpoints.yml

该文件中的每个条目都是一个独立的断点,由一个机器名(定义断点的唯一名称)和断点参数的子元素组成:

  1. label:断点标题
  2. mediaQuery:用于确定该断点设备屏幕大小的文本
  3. weight:断点的权重。你可以设置带有重叠 mediaQuery 的断点,因此需要通过权重确定哪个断点优先执行。
  4. multiplier:显示用于确定 mediaQuery 的像素倍数。一些设备(例如 iPhone)使用 Retina 显示屏,实际上两个物理像素用于显示一个网站像素。

drupalbook.breakpoints.yml:

drupalbook.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
drupalbook.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
drupalbook.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x

你需要将这样的文件添加到你的主题中,只是名称中用你的主题名替换 drupalbook

响应式图片(Responsive Image)

现在让我们启用 Responsive Image 模块:

Breakpoints

现在,如果你进入响应式图片样式编辑页面:

admin/config/media/responsive-image-style

Breakpoints

然后进入编辑 Narrow 的响应式预设:

admin/config/media/responsive-image-style/narrow

并指定从我们的主题中获取 Narrow 尺寸:

(截图)

现在你可以为响应式 Narrow 预设的每个断点单独设置图片样式:

(截图)

现在,如果我们将某个字段设置为通过 Narrow 预设显示,那么在不同屏幕分辨率下就会显示不同尺寸的图片:

(截图)