Magento 2: стиль-m.css против стиля-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

— Алексей Разбаков
источник

12

Эти файлы создаются через LESS.

В теории style-m.css должен иметь меньше кода и иметь стили только для мобильных устройств, чем style-l.css, чтобы быстрее загружаться на мобильные устройства.

Это не совсем правильно. styles-m.cssСодержит правила CSS для мобильных и настольных и , таким образом , как правило , больше , чем styles-l.cssкоторый содержит правила для рабочего стола. Тем не менее, цель все та же: мобильным устройствам не нужно загружать правила CSS для настольных устройств.

Что касается вопроса о том, как стили могут быть «размещены» в любом из этих файлов, это делается с помощью медиазапросов библиотеки пользовательского интерфейса Magento, которые помогают 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 .

— 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применяется только для больших экранов (выше 768 пикселей) и styles-m.cssприменяется все время.

Вот почему styles-m.cssесть больше кода, потому что он содержит мобильный код, а также код, который применяется независимо от ширины экрана. styles-l.cssсодержит только код для больших экранов.

— Рафаэль в цифровом пианизме
источник

1

«у styles-m.css больше кода, потому что» неверно, если вы используете подход Mobile-First

— Алексей Разбаков

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

— Тобиас Хартманн
источник