参与响应式网站开发的一些前端开发人员不太可能不熟悉CSS媒体查询的概念在这篇博客中,我将看到Magento 2在其默认主题开发工作流程中实现此功能的方法。

Magento 2媒体查询如何工作?

在Magento 2的核心中,Magento UI库中定义的媒体查询机制.media-width()混合

.media-width(<@extremum>, <@break>);

@extremum:max | min - 设置是否在媒体查询条件中使用min-width或max-width

@break:value - 设置断点的值以与媒体查询条件进行比较

我们可以在下面的例子中看到它的实际用途:

// In .less file
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    your styles
}
 
// After compilation, in .css file
@media only screen and (max-width: 640px) {
    your styles
}

这个mixin用于在某些媒体查询中对样式规则进行分组,可以在主题中的任何.less文件中随时使用。最后,它只会被调用一次lib/web/css/source/lib/_responsive.less file

如果您查看.less文件编译的最终结果.css文件,您将看到每个媒体查询及其所有规则只有一次,因此没有对同一查询的多次调用。

 

默认设置

默认情况下,媒体查询在两个不同的文件中输出样式:

1. styles-m.less - 生成基本和移动的特定样式

2. styles-l.less - 生成桌面特定样式(适用于768px宽屏幕和更高)

这意味着,当在移动设备上打开网站时,它将仅加载从styles-m.less文件编译的样式。仅当屏幕宽度为768px或更高时,才会编译和加载第二个文件(styles-l.less)中的额外样式。

对于此样式组分隔,使用特殊变量@ media-target@ media-common

// For targetting device for styles output
@media-target: all|desktop|mobile
 
// In practice
& when (@media-target = 'mobile'), (@media-target = 'all') {
    @media only screen and (max-width: (@screen__xs - 1)) {
        .media-width('max', @screen__xs);
    }
}
 
// For deciding whether to output common styles.
@media-common: true|false
 
// Adding common styles
& when (@media-common = true) {
    your styles
}

立即可用,Magento UI库有一组断点的预定义变量。我们可以在任何需要它们的情况下使用它们,并且可以使用新的更改或扩展它们:

  • 320px
  • 480px
  • 640px
  • 768px(用于在移动和桌面视图之间切换的断点)
  • 1024px
  • 1440px

自定义断点

很多时候,我们会发现自己需要添加一个额外的断点(除了默认断点),我们可以在其中应用不同的样式。要在我们的主题中添加自定义断点,需要完成三件事。

1.为新断点定义变量。

首先,我们必须创建一个/web/css/source/variables.less file如果我们使用独立主题,则此文件将是新的且为空。但是,由于我们遵循最佳实践(继承自Magento Blank主题),我们必须从父主题复制此文件。

在这里我们可以定义自定义断点:

@custom__breakpoint: 1280px;

2.实现我们的新断点

为此,我们将通过将其复制到我们的主题来覆盖Magento UI库中的_responsive.less文件/web/css/source/lib/现在,在我们主题的_responsive.less文件中,我们必须通过为新的自定义断点添加适当的规则来编辑.media-width()mixin。

& when (@media-target = 'desktop'), (@media-target = 'all') {
    @media all and (min-width: @custom__breakpoint) {
        .media-width('min', @custom__breakpoint);
    }
}

3.实现新断点的屏幕更改。

如果一切设置正确,我们应该能够在我们的主题.less文件中随时调用我们新的.media-width()mixin。

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @custom__breakpoint) {
    // Stlying applied at @custom__breakpoint breakpoint
}

帮助

最后,为了总结一下,我会给你一些快速启动的代码; 您可以快速应用的媒体查询,具体取决于您要定位的屏幕尺寸。

// Common
// (for styles used in both mobile and desktop views)
& when (@media-common = true) {}
 
// Mobile
// (for all mobile styles.)
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {}
 
// Tablet
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
 
// Desktop
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {}