Magento 2: style-m.css vs style-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

Ці файли генеруються через МЕНШЕ.

Теоретично стиль-m.css повинен мати менше коду та мати стилі лише для мобільних пристроїв, ніж style-l.css, щоб швидше завантажуватись на мобільні пристрої.

Це не зовсім правильно. Він styles-m.cssмістить правила CSS як для мобільних, так і для настільних ПК, і, отже, зазвичай більший за styles-l.cssправила, що містять правила для робочого столу. Однак мета все одно така, таким чином, мобільним пристроям не потрібно завантажувати правила CSS для настільних пристроїв.

Що стосується питання про те, як можна розмістити стилі в будь-якому з цих файлів, це робиться за допомогою медіа-запитів бібліотеки Magento UI, які допомагають Magento створити ці два файли з ваших менших правил.

Щоб навести приклад, медіаблок на зразок наступного буде розміщений, styles-mоскільки і на настільних, і на мобільних пристроях правила в цьому блоці є "спільними":

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

Блок запитів медіа, як це було б для пристроїв, які мають мінімальну роздільну здатність "screen_xs", це мобільні пристрої з роздільною здатністю екрана 480 пікселів і більше, тобто він все одно буде розміщений, styles-mале не обов'язково вплине на всі мобільні пристрої:

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

Зміна , (@extremum = 'min')щоб (@extremum = 'max')б змінити правило на протилежний , і , таким чином , впливають тільки на пристрої з шириною менше , ніж 480px.

І такий блок стосуватиметься лише настільних пристроїв і таким чином розміщуватиметься 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 мають більше коду, оскільки" не відповідає дійсності, якщо ви використовуєте мобільний підхід

— Олексій Разбаков,

2

Ви визначаєте це за допомогою медіа-запитів і менше функцій захисту. Наприклад, & when (@media-common = true) { ... }перейдіть до стилів-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

— Тобіас Хартманн
джерело