Magento 2: style-m.css vs style-l.css

10

Wie style-m.cssund style-l.cssDateien werden in Magento2 generiert?

Theoretisch style-m.csssollte weniger Code und Stile nur für mobile Geräte vorhanden style-l.csssein, um schneller auf mobile Geräte geladen zu werden.

Wie definieren Sie in weniger Dateien, ob ein Teil des Codes Teil von style-m.cssoder sein soll style-l.css?

Die folgenden Links und der Quellcode haben mir nicht geholfen, es zu verstehen.

Ressourcen:

magento2 layout css

— Aleksey Razbakov
quelle

12

Diese Dateien werden durch WENIGER generiert.

Theoretisch sollte style-m.css weniger Code haben und Stile nur für mobile Geräte als style-l.css haben, um schneller auf mobile Geräte geladen zu werden.

Dies ist nicht ganz richtig. Das styles-m.cssenthält CSS-Regeln für Mobilgeräte und Desktops und ist daher im Allgemeinen größer als das, styles-l.csswas Regeln für den Desktop enthält. Das Ziel ist jedoch immer noch dasselbe. Auf diese Weise müssen mobile Geräte keine CSS-Regeln für Desktop-Geräte herunterladen.

In Bezug auf die Frage, wie Stile in einer dieser Dateien "platziert" werden können, erfolgt dies über die Medienabfragen der Magento UI-Bibliothek, mit denen Magento diese beiden Dateien aus Ihren WENIGEREN Regeln erstellen kann.

Um Ihnen ein Beispiel zu geben, wird ein Medienblock wie der folgende eingefügt, styles-mda sowohl Desktop- als auch Mobilgeräte Regeln in diesem Block "gemeinsam" haben:

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

Ein solcher Medienabfrageblock wäre für Geräte mit einer Mindestauflösung von "screen_xs" gedacht, bei denen es sich um mobile Geräte mit einer Bildschirmauflösung von 480px und mehr handelt. Dies bedeutet, dass er weiterhin platziert wird, styles-maber nicht unbedingt alle mobilen Geräte betrifft :

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

Durch Ändern von (@extremum = 'min')to (@extremum = 'max')wird die Regel in die entgegengesetzte Richtung geändert, sodass nur Geräte mit einer Breite von weniger als 480 Pixel betroffen sind.

Und ein Block wie dieser würde nur Desktop-Geräte betreffen und somit platziert werden styles-l, da alles 'oben' screen__m(standardmäßig) als Desktop-Gerät betrachtet wird:

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

Weitere Informationen zu diesen Haltepunkten finden Sie im Magento-Entwicklerhandbuch .

— TiEul
quelle

Bedeutet dies, dass wir nicht überschreiben dürfen styles-l.cssund styles-m.cssin unserem Thema?

— Schwarz

4

Entsprechend dem default_head_blocks.xmlim leeren Themenlayout:

<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.cssSoweit ich weiß , wird es nur für große Bildschirme (über 768px) styles-m.cssangewendet und wird ständig angewendet.

Das ist der Grund, warum Sie styles-m.cssmehr Code haben sollten, da dieser sowohl den mobilen Code als auch den Code enthält, der unabhängig von der Bildschirmbreite gilt. styles-l.cssenthält nur den Code für größere Bildschirme.

— Raphael beim digitalen Pianismus
quelle

1

"styles-m.css haben mehr Code, weil" nicht wahr ist, wenn Sie Mobile-First-Ansatz verwenden

— Aleksey Razbakov

2

Sie definieren dies mit Ihren Medienabfragefunktionen und weniger Schutzfunktionen. & when (@media-common = true) { ... }Gehen Sie zum Beispiel zu styles-m.css, da diese Stile überall verfügbar sein sollten.

Bei Medienabfragen geht dies zur Desktop-Datei:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

Vielleicht möchten Sie in meinen Folien nachsehen, wie Sie mit Stilen umgehen:
https://slidr.io/toh82/how-to-deal-with-styles-in-magento-2#1

— Tobias Hartmann
quelle