Эти файлы создаются через 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 .
styles-l.css
иstyles-m.css
в нашей теме?Согласно
default_head_blocks.xml
пустой макет темы:Из того, что я понимаю,
styles-l.css
применяется только для больших экранов (выше 768 пикселей) иstyles-m.css
применяется все время.Вот почему
styles-m.css
есть больше кода, потому что он содержит мобильный код, а также код, который применяется независимо от ширины экрана.styles-l.css
содержит только код для больших экранов.источник
Вы определяете это с помощью функций медиазапроса и меньшего количества функций защиты. Например,
& 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
источник