Magento2에서 어떻게 style-m.css그리고 style-l.css파일이 생성됩니까?
이론적 으로 모바일 장치에 더 빨리로드하기 style-m.css보다는 코드가 적고 모바일 장치에 대해서만 스타일이 있어야합니다 style-l.css.
코드의 일부가 style-m.css또는의 일부 여야하는 경우 적은 파일로 어떻게 정의 style-l.css합니까?
다음 링크와 소스 코드는 이해하는데 도움이되지 않았습니다.
자원:
Magento2에서 어떻게 style-m.css그리고 style-l.css파일이 생성됩니까?
이론적 으로 모바일 장치에 더 빨리로드하기 style-m.css보다는 코드가 적고 모바일 장치에 대해서만 스타일이 있어야합니다 style-l.css.
코드의 일부가 style-m.css또는의 일부 여야하는 경우 적은 파일로 어떻게 정의 style-l.css합니까?
다음 링크와 소스 코드는 이해하는데 도움이되지 않았습니다.
자원:
답변:
이 파일은 LESS를 통해 생성됩니다.
이론적으로 style-m.css는 모바일 장치에 더 빨리로드하기 위해 style-l.css보다 모바일 장치에 대해서만 코드가 적고 스타일이 있어야합니다.
이것은 완전히 정확하지 않습니다. 이에 styles-m.css는 모바일 및 데스크톱에 대한 CSS 규칙 이 포함되어 있으므로 일반적으로 styles-l.css데스크톱에 대한 규칙 보다 큽니다 . 그러나 목표는 여전히 동일하므로 모바일 장치는 데스크톱 장치에 대한 CSS 규칙을 다운로드 할 필요가 없습니다.
이러한 파일 중 하나에서 스타일을 "배치"할 수있는 방법에 대한 질문은 Magento가 LESS 규칙에서이 두 파일을 만드는 데 도움이되는 Magento UI 라이브러리 미디어 쿼리를 통해 수행됩니다.
예를 들어, styles-m데스크톱과 모바일 장치 모두이 블록 내에 "공통"규칙 이 있으므로 다음과 같은 미디어 블록이 배치됩니다 .
& when (@media-common = true) {
h1 {
font-size: 12px;
}
}이와 같은 미디어 쿼리 블록은 화면 해상도가 480px 이상인 모바일 장치 인 "screen_xs"의 최소 해상도를 가진 장치를위한 것입니다. 즉, 여전히 배치되어 styles-m있지만 모든 모바일 장치에 영향을 미치지는 않습니다.
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xs) {
h1 {
font-size: 18px;
}
}(가) 변경 (@extremum = 'min')하기 위해 (@extremum = 'max')그 반대에 규칙을 변경하고, 따라서 만 480 픽셀보다 작은 폭 장치에 영향을 미칠 것입니다.
그리고 이와 같은 블록은 데스크톱 장치에만 관련이 있으므로 styles-l위의 모든 것이 screen__m데스크톱 장치 (기본적으로)로 간주 되므로에 배치됩니다 .
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
h1 {
font-size: 24px;
}
}이러한 중단 점에 대한 자세한 내용은 Magento 개발자 안내서를 참조하십시오 .
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더 큰 화면의 코드 만 포함합니다.
미디어 쿼리 기능과 덜 가드 기능으로 정의하십시오. 예를 들어 & 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 에서 스타일을 다루는 방법에 대한 내 슬라이드를 확인하고 싶을 수도 있습니다.
styles-l.css과styles-m.css우리의 테마?