Magento2 CSS媒体查询

参与响应式网站开发的一些前端开发人员不太可能不熟悉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) {}