Magento 2: style-m.css กับ 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

— Aleksey Razbakov
แหล่งที่มา

12

ไฟล์เหล่านี้สร้างขึ้นผ่าน LESS

ในทางทฤษฎี style-m.css ควรมีโค้ดน้อยกว่าและมีสไตล์สำหรับอุปกรณ์มือถือเท่านั้นกว่า style-l.css เพื่อที่จะโหลดบนอุปกรณ์มือถือได้เร็วขึ้น

สิ่งนี้ไม่ถูกต้องสมบูรณ์ styles-m.cssมีกฎ CSS สำหรับทั้งโทรศัพท์มือถือและสก์ท็อปและทำให้โดยทั่วไปมีขนาดใหญ่กว่าstyles-l.cssซึ่งมีกฎสำหรับเดสก์ทอป อย่างไรก็ตามเป้าหมายยังคงเหมือนเดิมวิธีนี้อุปกรณ์มือถือไม่จำเป็นต้องดาวน์โหลดกฎ CSS สำหรับอุปกรณ์เดสก์ท็อป

สำหรับคำถามเกี่ยวกับลักษณะที่ "วาง" ในไฟล์เหล่านั้นวิธีนี้สามารถทำได้ผ่านการสืบค้นสื่อในไลบรารีของ Magento UI ซึ่งช่วยให้ 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')จะเปลี่ยนกฎที่จะตรงข้ามและทำให้มีผลเฉพาะอุปกรณ์ที่มีความกว้างขนาดเล็กกว่า 480px

และบล็อกแบบนี้จะเกี่ยวกับอุปกรณ์เดสก์ท็อปเท่านั้นและจะถูกวางไว้styles-lเนื่องจากทุกสิ่งที่ 'เหนือ' screen__mถือเป็นอุปกรณ์เดสก์ท็อป (โดยค่าเริ่มต้น):

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเหล่านี้จุดพักในคู่มือนักพัฒนาซอฟต์แวร์วีโอไอพี

— 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จะใช้กับหน้าจอขนาดใหญ่ (สูงกว่า 768px) เท่านั้นและstyles-m.cssจะมีผลตลอดเวลา

นั่นคือเหตุผลว่าทำไมstyles-m.cssมีรหัสมากขึ้นเพราะมันมีรหัสมือถือเช่นเดียวกับรหัสที่ใช้สิ่งที่ความกว้างของหน้าจอ styles-l.cssมีรหัสสำหรับหน้าจอขนาดใหญ่เท่านั้น

— ราฟาเอลที่เปียโนดิจิตอล
แหล่งที่มา

1

"styles-m.css มีรหัสมากขึ้นเพราะ" ไม่เป็นความจริงถ้าคุณใช้วิธีการแบบเคลื่อนที่ครั้งแรก

— Aleksey Razbakov

2

คุณกำหนดด้วยฟังก์ชั่นแบบสอบถามสื่อและฟังก์ชั่นการป้องกันน้อย ตัวอย่างเช่น& 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

— โทเบียสฮาร์ตมันน์
แหล่งที่มา