Magento 2：style-m.css与style-l.css

10

如何style-m.css和style-l.css文件Magento2产生？

从理论上讲style-m.css，与style-l.css为了更快地在移动设备上加载相比，应该为移动设备使用更少的代码和样式。

如果部分代码应该是style-m.css或的一部分，如何在较少的文件中定义style-l.css？

以下链接和源代码并没有帮助我理解它。

资源：

magento2 layout css

— 亚历山大·拉兹巴科夫（Aleksey Razbakov）
source

12

这些文件是通过LESS生成的。

理论上，style-m.css应该具有比style-l.css更少的代码，并且仅具有针对移动设备的样式，以便更快地在移动设备上加载。

这不是完全正确的。在styles-m.css包含CSS规则移动和桌面因而通常比越大，styles-l.css其中包含了桌面的规则。但是，目标仍然是相同的，通过这种方式，移动设备无需下载台式机设备的CSS规则。

关于如何在其中一个文件中“放置”样式的问题，这是通过Magento UI库媒体查询完成的，该查询帮助Magento根据您的LESS规则创建了这两个文件。

举一个例子，将放置一个如下所示的媒体块，styles-m因为台式机和移动设备在该块中都具有“共同的”规则：

& when (@media-common = true) {
  h1 {
    font-size: 12px;
  } 
}

像这样的媒体查询块将用于最低分辨率为“ screen_xs”的设备，这些设备是屏幕分辨率为480px或更大的移动设备，这意味着它仍将放置在其中，styles-m但不一定会影响所有移动设备：

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xs) {
  h1 {
    font-size: 18px;
  }  
}

改变(@extremum = 'min')到(@extremum = 'max')将在规则改变到它的反面，从而只影响设备的宽度比480像素小。

像这样的块将仅涉及台式机设备，因此被放置在中styles-l，因为“上方”的所有内容均被screen__m视为台式机设备（默认情况下）：

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  h1 {
    font-size: 24px;
  }  
}

您可以在《Magento开发人员指南》中阅读有关这些断点的更多信息。

— 蒂尔
source

这是否意味着，我们不能忽略styles-l.css，并styles-m.css在我们的主题？

— 黑色

4

根据default_head_blocks.xml空白主题布局：

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/styles-m.css"/>
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print"/>
    </head>
</page>

据我了解，styles-l.css它仅适用于大屏幕（768像素以上），并且styles-m.css一直适用。

这就是为什么styles-m.css需要更多代码的原因，因为它包含移动代码以及适用于任何屏幕宽度的代码。styles-l.css仅包含大屏幕的代码。

— 拉斐尔在数字钢琴家
source

1

如果您使用“移动优先”方法，则“ styles-m.css具有更多代码，因为”不正确

— Aleksey Razbakov

2

您可以使用媒体查询功能和较少的保护功能来定义它。例如，& when (@media-common = true) { ... }转到styles-m.css，因为这些样式应该随处可用。

说到媒体查询，将转到桌面文件：
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

您可能要在此处查看有关如何处理样式的幻灯片：https :
//slidr.io/toh82/how-to-deal-with-styles-in-magento-2#1

— 托比亚斯·哈特曼
source