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

10

Magento2ではどのようにstyle-m.cssしてstyle-l.cssファイルが生成されますか？

理論的にstyle-m.cssは、モバイルデバイスstyle-l.cssへのロードを高速化するよりも、コードが少なく、モバイルデバイス専用のスタイルを持つべきです。

コードの一部をの一部にstyle-m.cssするstyle-l.cssか、または一部にする必要がある場合、より少ないファイルでどのように定義しますか？

次のリンクとソースコードは、それを理解するのに役立ちませんでした。

リソース：

magento2 layout css

— アレクセイ・ラズバコフ
ソース

12

これらのファイルはLESSを介して生成されます。

理論的には、style-m.cssは、モバイルデバイスに高速にロードするために、style-l.cssよりもコードが少なく、モバイルデバイス専用のスタイルを持つべきです。

これは完全に正しくはありません。にstyles-m.cssは、モバイルとデスクトップの両方のCSSルールが含まれているため、通常styles-l.css、デスクトップのルールが含まれているルールよりも大きくなっています。ただし、目標は同じで、モバイルデバイスはデスクトップデバイス用のCSSルールをダウンロードする必要がありません。

これらのファイルのいずれかにスタイルを「配置」する方法については、MagentoがLESSルールからこれらの2つのファイルを作成するのに役立つMagento UIライブラリメディアクエリを介して行われます。

例を挙げれば、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')、ルールが反対に変更され、幅が480px未満のデバイスにのみ影響します。

また、このようなブロックはデスクトップデバイスのみに関係するためstyles-l、「上」にあるものscreen__mはすべてデスクトップデバイス（デフォルト）と見なされるため、に配置されます。

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

これらのブレークポイントについて詳しくは、Magento開発者ガイドをご覧ください。

— TiEul
ソース

これは、私たちがテーマ内でオーバーライド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、大画面（768px以上）にのみ適用され、styles-m.css常に適用されます。

styles-m.cssモバイルコードと画面の幅に関係なく適用されるコードが含まれているため、コードが増えるのはそのためです。styles-l.css大きな画面のコードのみが含まれています。

— デジタルピアニズムのラファエル
ソース

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

— トビアス・ハートマン
ソース