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

10

Bagaimana style-m.cssdan style-l.cssfile dihasilkan di Magento2?

Secara teori style-m.cssseharusnya memiliki lebih sedikit kode dan memiliki gaya hanya untuk perangkat seluler daripada style-l.cssagar memuat pada perangkat seluler lebih cepat.

Bagaimana Anda mendefinisikan dalam file yang lebih sedikit jika bagian dari kode harus menjadi bagian dari style-m.cssatau style-l.css?

Tautan dan kode sumber berikut tidak membantu saya untuk memahaminya.

Sumber:

magento2 layout css Aleksey Razbakov
sumber

Jawaban:

12

File-file ini dihasilkan melalui KURANG.

Secara teori style-m.css harus memiliki lebih sedikit kode dan memiliki gaya hanya untuk perangkat seluler daripada style-l.css untuk memuat pada perangkat seluler lebih cepat.

Ini tidak sepenuhnya benar. The styles-m.cssberisi aturan CSS untuk kedua ponsel dan desktop dan dengan demikian umumnya lebih besar dari styles-l.cssyang berisi aturan untuk desktop. Namun, tujuannya masih sama, dengan cara ini, perangkat seluler tidak perlu mengunduh aturan CSS untuk perangkat desktop.

Mengenai pertanyaan tentang bagaimana gaya dapat "ditempatkan" di salah satu file tersebut, ini dilakukan melalui kueri media perpustakaan Magento UI yang membantu Magento membuat dua file ini dari aturan KURANG Anda.

Untuk memberi Anda contoh, blok media seperti yang berikut ini akan ditempatkan styles-mkarena desktop dan perangkat seluler memiliki aturan dalam blok ini "sama":

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

Blok permintaan media seperti ini adalah untuk perangkat yang memiliki resolusi minimal "screen_xs", yang merupakan perangkat seluler dengan resolusi layar 480px dan lebih besar, artinya tetap ditempatkan styles-mtetapi tidak akan mempengaruhi semua perangkat seluler:

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

Mengubah (@extremum = 'min')ke (@extremum = 'max')akan mengubah aturan ke kebalikannya dan dengan demikian hanya mempengaruhi perangkat dengan lebar lebih kecil dari 480px.

Dan blok seperti ini hanya akan menyangkut perangkat desktop dan dengan demikian ditempatkan di styles-l, karena semuanya 'di atas' screen__mdianggap sebagai perangkat desktop (secara default):

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

Anda dapat membaca lebih lanjut tentang break point ini di panduan pengembang Magento .

TiEul
sumber
Apakah ini berarti kita tidak boleh menimpa styles-l.cssdan styles-m.cssdalam tema kita?
Hitam
4

Menurut default_head_blocks.xmltata letak tema kosong:

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

Dari apa yang saya pahami, styles-l.csshanya diterapkan untuk layar besar (di atas 768px) dan styles-m.cssditerapkan sepanjang waktu.

Jadi itulah alasan mengapa styles-m.cssmemiliki lebih banyak kode karena berisi kode seluler serta kode yang berlaku apa pun lebar layarnya. styles-l.csshanya berisi kode untuk layar yang lebih besar.

Raphael di Digital Pianism
sumber
1
"styles-m.css memiliki lebih banyak kode karena" tidak benar, jika Anda menggunakan pendekatan Mobile-First
Aleksey Razbakov
2

Anda mendefinisikannya dengan fungsi kueri media dan lebih sedikit fungsi penjaga. Misalnya & when (@media-common = true) { ... }pergi ke styles-m.css karena gaya tersebut harus tersedia di mana-mana.

Berbicara tentang pertanyaan media, ini berlaku untuk file desktop:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

Anda mungkin ingin memeriksa Slide saya tentang cara menangani gaya di sini:
https://slidr.io/toh82/how-to-deal-with-styles-in-magento-2#1

Tobias Hartmann
sumber