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

10

Magento2'de nasıl style-m.cssve style-l.cssdosyalar oluşturulur?

Teorik olarak , mobil cihazlara daha hızlı yüklenmek yerine, style-m.cssyalnızca mobil cihazlar için daha az koda ve stile sahip olmalıdır style-l.css.

Kodun bir parçasının style-m.cssveya parçası olması gerektiğini daha az dosyada nasıl tanımlarsınız style-l.css?

Aşağıdaki bağlantılar ve kaynak kodu onu anlamama yardımcı olmadı.

Kaynaklar:

magento2 layout css

— Aleksey Razbakov
kaynak

12

Bu dosyalar LESS ile oluşturulur.

Teorik olarak style-m.css, mobil cihazlara daha hızlı yüklenebilmek için style-l.css dosyasından daha az koda ve yalnızca mobil cihazlar için stillere sahip olmalıdır.

Bu tamamen doğru değil. styles-m.cssHem mobil hem de masaüstü için CSS kurallarını içeren ve böylece genellikle daha büyüktür styles-l.cssmasaüstü için kuralları içeren. Ancak, hedef hala aynıdır, bu şekilde mobil cihazların masaüstü cihazlar için CSS kurallarını indirmesine gerek yoktur.

Stillerin bu dosyalardan birine nasıl "yerleştirilebileceği" sorusu ile ilgili olarak, bu, Magento'nun bu iki dosyayı LESS kurallarınızdan oluşturmasına yardımcı olan Magento UI kütüphanesi medya sorguları aracılığıyla yapılır.

Size bir örnek vermek gerekirse, styles-mhem masaüstü hem de mobil cihazlar bu blok içinde "ortak" olan kurallara sahip olduğundan aşağıdakine benzer bir medya bloğu yerleştirilir :

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

Bunun gibi bir medya sorgu bloğu, minimum ekran çözünürlüğü 480px ve daha büyük olan mobil cihazlar olan "screen_xs" değerine sahip cihazlar için olacaktır, yani yine de yerleştirilecek, styles-mancak tüm mobil cihazları etkilemeyecektir:

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

Değişen (@extremum = 'min')için (@extremum = 'max'), karşıtı olan kuralı değiştirmek ve böylece sadece 480px daha küçük bir genişliğe sahip cihazlar etkiler.

Ve böyle bir blok sadece masaüstü cihazlarla ilgilidir ve styles-l'yukarıda' screen__molan her şey bir masaüstü cihazı olarak kabul edilir (varsayılan olarak):

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

Bu kırılma noktaları hakkında daha fazla bilgiyi Magento geliştirici kılavuzunda bulabilirsiniz .

— TiEul
kaynak

Bu, geçersiz kılınmayacağımız styles-l.cssve temamızda olduğu anlamına mı geliyor styles-m.css?

— Siyah

4

Göre default_head_blocks.xmlboş tema düzeni:

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

Anladığım kadarıyla, styles-l.csssadece büyük ekranlar için (768 pikselin üzerinde) styles-m.cssuygulanır ve her zaman uygulanır.

Bu nedenle styles-m.css, mobil kodun yanı sıra ekran genişliği ne olursa olsun geçerli olan kodu içerdiğinden daha fazla kodun olmasının nedeni de budur. styles-l.cssyalnızca daha büyük ekranların kodunu içerir.

— Raphael - Dijital Piyanizm
kaynak

1

Mobile-First yaklaşımını kullanıyorsanız, "styles-m.css kodunun daha fazla kodu var," doğru değil

— Aleksey Razbakov

2

Bunu medya sorgu işlevleriniz ve daha az koruma işlevlerinizle tanımlarsınız. Örneğin & when (@media-common = true) { ... }, styles-m.css adresine gidin, çünkü bu stiller her yerde kullanılabilir olmalıdır.

Medya sorguları hakkında konuşurken, masaüstü dosyasına gider:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

Buradaki stillerle nasıl başa çıkılacağı konusunda Slaytlarımı kontrol etmek isteyebilirsiniz:
https://slidr.io/toh82/how-to-deal-with-styles-in-magento-2#1

— Tobias Hartmann
kaynak