6.5. 在 Drupal 中使用 CSS。主题中的断点与响应式设置
在之前的教程中,我们已经将 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
。
该文件中的每个条目都是一个独立的断点,由一个机器名(定义断点的唯一名称)和断点参数的子元素组成:
- label:断点标题
- mediaQuery:用于确定该断点设备屏幕大小的文本
- weight:断点的权重。你可以设置带有重叠 mediaQuery 的断点,因此需要通过权重确定哪个断点优先执行。
- 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 模块:
现在,如果你进入响应式图片样式编辑页面:
admin/config/media/responsive-image-style
然后进入编辑 Narrow 的响应式预设:
admin/config/media/responsive-image-style/narrow
并指定从我们的主题中获取 Narrow 尺寸:
(截图)
现在你可以为响应式 Narrow 预设的每个断点单独设置图片样式:
(截图)
现在,如果我们将某个字段设置为通过 Narrow 预设显示,那么在不同屏幕分辨率下就会显示不同尺寸的图片:
(截图)