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

10

Jak style-m.cssi style-l.csspliki są generowane w Magento2?

Teoretycznie style-m.csspowinien mieć mniej kodu i mieć style tylko dla urządzeń mobilnych niż style-l.cssw celu szybszego ładowania na urządzenia mobilne.

Jak zdefiniować w mniejszym pliku, czy część kodu powinna być częścią style-m.csslub style-l.css?

Poniższe linki i kod źródłowy nie pomogły mi go zrozumieć.

Zasoby:

magento2 layout css

— Aleksey Razbakov
źródło

12

Pliki te są generowane przez LESS.

Teoretycznie style-m.css powinien mieć mniej kodu i mieć style tylko dla urządzeń mobilnych niż style-l.css, aby szybciej ładować się na urządzeniach mobilnych.

To nie jest do końca poprawne. styles-m.cssZawiera reguły CSS dla obu komputerach i urządzeniach mobilnych, a więc jest na ogół większa niż styles-l.css, który zawiera zasady pulpicie. Jednak cel jest nadal ten sam, w ten sposób urządzenia mobilne nie muszą pobierać reguł CSS dla urządzeń stacjonarnych.

Jeśli chodzi o pytanie, w jaki sposób style mogą być „umieszczane” w każdym z tych plików, odbywa się to za pomocą zapytań medialnych biblioteki Magento UI, które pomagają Magento utworzyć te dwa pliki z twoich reguł LESS.

Dla przykładu, blok multimedialny taki jak poniższy zostałby umieszczony, styles-mponieważ zarówno komputery, jak i urządzenia mobilne mają reguły w tym bloku „wspólne”:

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

Taki blok zapytań o media byłby przeznaczony dla urządzeń, które mają minimalną rozdzielczość „screen_xs”, które są urządzeniami mobilnymi o rozdzielczości ekranu 480px i większej, co oznacza, że nadal byłby umieszczony, styles-male niekoniecznie wpływałby na wszystkie urządzenia mobilne:

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

Zmiana (@extremum = 'min')aby (@extremum = 'max')zmieni reguły swoje przeciwieństwo, a zatem dotyczą tylko urządzeń o szerokości mniejszej niż 480px.

I taki blok dotyczyłby tylko komputerów stacjonarnych i dlatego zostałby umieszczony styles-l, ponieważ wszystko „powyżej” screen__mjest uważane za urządzenie stacjonarne (domyślnie):

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

Możesz przeczytać więcej o tych punktach przerwania w przewodniku programisty Magento .

— TiEul
źródło

Czy to oznacza, że nie możemy przesłonić styles-l.cssi styles-m.cssw naszym temacie?

— Czarny

4

Zgodnie default_head_blocks.xmlz pustym układem motywu:

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

Z tego, co rozumiem, styles-l.cssjest stosowany tylko do dużych ekranów (powyżej 768 pikseli) i styles-m.cssjest stosowany przez cały czas.

To dlatego powód, aby styles-m.cssmieć więcej kodu, ponieważ zawiera on kod telefonu komórkowego, a także kod, który stosuje się niezależnie od szerokości ekranu. styles-l.csszawiera tylko kod dla większych ekranów.

— Raphael at Digital Pianism
źródło

1

„styles-m.css mają więcej kodu, ponieważ” nie jest prawdą, jeśli zastosujesz podejście Mobile-First

— Aleksey Razbakov

2

Możesz to zdefiniować za pomocą funkcji zapytania o media i mniej funkcji ochronnych. Na przykład & when (@media-common = true) { ... }przejdź do styles-m.css, ponieważ style te powinny być dostępne wszędzie.

Mówiąc o zapytaniach o media, idzie to do pliku na pulpicie:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

Możesz sprawdzić moje Prezentacje, jak radzić sobie ze stylami tutaj:
https://slidr.io/toh82/how-to-deal-with-styles-in-magento-2#1

— Tobias Hartmann
źródło