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

10

Làm thế nào style-m.cssvà style-l.csscác tập tin được tạo ra trong Magento2?

Về lý thuyết style-m.cssnên có ít mã hơn và chỉ có kiểu cho thiết bị di động hơn là style-l.cssđể tải trên thiết bị di động nhanh hơn.

Làm thế nào bạn xác định trong tập tin ít hơn nếu một phần của mã nên là một phần của style-m.csshoặc style-l.css?

Các liên kết và mã nguồn sau đây không giúp tôi hiểu được.

Tài nguyên:

magento2 layout css

— Hà Lan Razsey
nguồn

12

Những tập tin này được tạo ra thông qua LESS.

Trong lý thuyết style-m.css nên có ít mã hơn và chỉ có kiểu cho thiết bị di động so với style-l.css để tải trên thiết bị di động nhanh hơn.

Điều này không hoàn toàn chính xác. Các styles-m.cssquy tắc chứa CSS cho cả thiết bị di động và máy tính để bàn và do đó thường lớn hơn styles-l.cssquy tắc chứa máy tính để bàn. Tuy nhiên, mục tiêu vẫn là như vậy, theo cách này, các thiết bị di động không cần tải xuống các quy tắc CSS cho thiết bị máy tính để bàn.

Liên quan đến câu hỏi về cách các kiểu có thể được "đặt" trong một trong các tệp đó, điều này được thực hiện thông qua các truy vấn phương tiện thư viện UI Magento giúp Magento tạo hai tệp này từ quy tắc LESS của bạn.

Để cho bạn một ví dụ, một khối phương tiện như sau sẽ được đặt styles-mvì cả máy tính để bàn và thiết bị di động đều có các quy tắc trong khối này "chung":

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

Một khối truy vấn phương tiện như thế này sẽ dành cho các thiết bị có độ phân giải tối thiểu là "screen_xs", là các thiết bị di động có độ phân giải màn hình 480px trở lên, có nghĩa là nó vẫn sẽ được đặt styles-mnhưng không nhất thiết ảnh hưởng đến tất cả các thiết bị di động:

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

Thay đổi (@extremum = 'min')thành (@extremum = 'max')sẽ thay đổi quy tắc thành ngược lại và do đó chỉ ảnh hưởng đến các thiết bị có chiều rộng nhỏ hơn 480px.

Và một khối như thế này sẽ chỉ liên quan đến các thiết bị máy tính để bàn và do đó được đặt vào styles-l, vì mọi thứ 'ở trên' screen__mđược coi là một thiết bị máy tính để bàn (theo mặc định):

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

Bạn có thể đọc thêm về những điểm dừng này trong hướng dẫn dành cho nhà phát triển Magento .

— TiEul
nguồn

Điều này có nghĩa là chúng tôi không được phép ghi đè styles-l.cssvà styles-m.csstrong chủ đề của chúng tôi?

— Đen

4

Theo default_head_blocks.xmlcách bố trí chủ đề trống:

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

Theo những gì tôi hiểu, styles-l.csschỉ được áp dụng cho màn hình lớn (trên 768px) và styles-m.cssđược áp dụng mọi lúc.

Vì vậy, đó là lý do tại sao styles-m.csscó nhiều mã hơn vì nó chứa mã di động cũng như mã áp dụng cho dù chiều rộng màn hình là bao nhiêu. styles-l.csschỉ chứa mã cho màn hình lớn hơn.

— Raphael tại Pianism kỹ thuật số
nguồn

1

"Styles-m.css có nhiều mã hơn bởi vì" không đúng, nếu bạn sử dụng phương pháp Mobile-First

— Mitchsey Razbakov

2

Bạn xác định rằng với các chức năng truy vấn phương tiện và các chức năng bảo vệ ít hơn. Ví dụ: & when (@media-common = true) { ... }đi tới style-m.css vì những kiểu đó sẽ có sẵn ở mọi nơi.

Nói về truy vấn phương tiện, điều này đi đến tệp máy tính để bàn:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

Bạn có thể muốn kiểm tra các Trang trình bày của tôi về cách xử lý các kiểu ở đây:
https://slidr.io/toh82/how-to-deal-with-styles-in-magento-2#1

— Tobias Hartmann
nguồn