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

10

Come style-m.csse come style-l.cssvengono generati i file in Magento2?

In teoria style-m.cssdovrebbe avere meno codice e avere stili solo per i dispositivi mobili che style-l.cssper caricare più velocemente sui dispositivi mobili.

Come definisci in meno file se parte del codice dovrebbe far parte di style-m.csso style-l.css?

I seguenti collegamenti e codice sorgente non mi hanno aiutato a capirlo.

risorse:

magento2 layout css

— Aleksey Razbakov
fonte

12

Questi file vengono generati tramite MENO.

In teoria style-m.css dovrebbe avere meno codice e avere stili solo per dispositivi mobili rispetto a style-l.css per caricare più velocemente sui dispositivi mobili.

Questo non è completamente corretto. Il styles-m.csscontiene regole CSS sia per dispositivi mobili che desktop e quindi è generalmente più grande di quello styles-l.cssche contiene regole per desktop. Tuttavia, l'obiettivo è sempre lo stesso, in questo modo i dispositivi mobili non devono scaricare le regole CSS per i dispositivi desktop.

Per quanto riguarda il modo in cui gli stili possono essere "inseriti" in uno di questi file, questo viene fatto tramite le query multimediali della libreria UI di Magento che aiutano Magento a creare questi due file dalle tue regole LESS.

Per fare un esempio, un blocco multimediale come il seguente verrebbe inserito styles-mpoiché sia i dispositivi desktop che mobili hanno regole all'interno di questo blocco "in comune":

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

Un blocco di query multimediali come questo sarebbe per i dispositivi che hanno una risoluzione minima di "screen_xs", che sono dispositivi mobili con una risoluzione dello schermo di 480 px e superiore, il che significa che verrebbe comunque inserito styles-mma non influirebbe necessariamente su tutti i dispositivi mobili:

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

La modifica del (@extremum = 'min')to (@extremum = 'max')cambierebbe la regola nel suo opposto e influenzerebbe quindi solo i dispositivi con una larghezza inferiore a 480px.

E un blocco come questo riguarderebbe solo i dispositivi desktop e quindi verrebbe inserito styles-l, poiché tutto "sopra" screen__mè considerato un dispositivo desktop (per impostazione predefinita):

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

Puoi leggere ulteriori informazioni su questi punti di interruzione nella guida per gli sviluppatori di Magento .

— TiEul
fonte

Questo significa che non ci è permesso di scavalcare styles-l.csse styles-m.cssnel nostro tema?

— Nero

4

Secondo il default_head_blocks.xmllayout del tema vuoto:

<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>

Da quello che ho capito, styles-l.cssviene applicato solo per schermi di grandi dimensioni (sopra 768px) e styles-m.cssviene applicato tutto il tempo.

Quindi questo è il motivo per cui styles-m.csshai più codice perché contiene il codice mobile e il codice che si applica indipendentemente dalla larghezza dello schermo. styles-l.csscontiene solo il codice per schermi più grandi.

— Raffaello al Pianismo digitale
fonte

1

"styles-m.css ha più codice perché" non è vero, se usi l'approccio Mobile-First

— Aleksey Razbakov,

2

Lo definisci con le tue funzioni di media query e con meno funzioni di guardia. Ad esempio, & when (@media-common = true) { ... }vai a styles-m.css perché quegli stili dovrebbero essere disponibili ovunque.

Parlando di media query, questo va al file desktop:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

Potresti voler controllare le mie diapositive su come gestire gli stili qui:
https://slidr.io/toh82/how-to-deal-with-styles-in-magento-2#1

— Tobias Hartmann
fonte