lib/web/css/docs/responsive.html - 2.4-develop - githubmirror/magento2

lib/web/css/docs/responsive.html
83 строки216 KB
Alexandra Zota
ACP2E-4019: CE copyright updates for 2.4.9-beta1
22 окт 2025, 10:58
22 окт 2025, 10:583d4f486
<!--
/**
 * Copyright 2014 Adobe
 * All Rights Reserved.
 */
-->

<!DOCTYPE html><html><head><title>responsive | Magento UI Library
</title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.co … [Строка слишком длинная. Вы можете скачать файл]
<p>  Magento UI library provides a strong approach for working with media queries. It`s based on recursive call of <span style="white-space: nowrap"><code>.media-width()</code></span> mixin defined anywhere in project but invoked in one place in <span style="white-space: nowrap"><code>lib/web/css/source/lib/_responsive.less</code></span>. That&#39;s why in the resulting <code>styles.css</code> we have every media query only once with all the rules there, not a multiple calls for the same query.</p>
<p>  To see the media queries work resize window to understand which breakpoint is applied.</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-responsive-block"&gt;
      are applied.
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-responsive-block {
    padding: 10px;
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .example-responsive-block {
        background: #ffc;
    }
    .example-responsive-block:before {
        content: 'Mobile styles ';
        font-weight: bold;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .example-responsive-block {
        background: #ccf;
    }
    .example-responsive-block:before {
        content: 'Desktop styles ';
        font-weight: bold;
    }
}</code></pre></div></article><article id="responsive-mixins-usage" class="section"><div class="docs"><a href="#responsive-mixins-usage" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="responsive-mixins-usage">Responsive mixins usage</h1>
<p>  For grouping style rules in certain media queries .media-width() mixin used.</p>
<pre><code class="lang-css"> .media-width(&lt;@extremum&gt;, &lt;@break&gt;);</code></pre>
<p>  <span style="white-space: nowrap"><code>@extremum: max|min</code></span> - sets whether to use <strong>min-width</strong> or <strong>max-width</strong> in media query condition<br />
  <span style="white-space: nowrap"><code>@break: value</code></span> - sets the value of breakpoint to compare with in media query condition.<br />
  For example</p>
<pre><code class="lang-css">  .media-width(@extremum, @break) when (@extremum = &#39;max&#39;) and (@break = @screen__s) {
      your styles
  }</code></pre>
<p>  It will be complied to</p>
<pre><code class="lang-css">  @media only screen and (max-width: 640px) {
      your styles
  }</code></pre>
<p>  &nbsp;</p>
</div></article><article id="media-query-style-groups-separation-variables" class="section"><div class="docs"><a href="#media-query-style-groups-separation-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="media-query-style-groups-separation-variables">Media query style groups separation variables</h1>
<p>  <code>@media-common: true|false</code> - sets whether to output common styles.
  For common styles every time you want to add some styles you should use</p>
<pre><code class="lang-css">  &amp; when (@media-common = true) {
      your styles
  }</code></pre>
<p>  <code>@media-target: all|desktop|mobile</code> - Sets target device for styles output</p>
<pre><code class="lang-css">  &amp; when (@media-target = &#39;mobile&#39;),
  (@media-target = &#39;all&#39;) {
     @media only screen and (max-width: (@screen__xs - 1)) {
         .media-width(&#39;max&#39;, @screen__xs);
     }
 }</code></pre>
<h2 id="gathering">Gathering</h2>
<p>  Everything that you include in collector mixins above will go in place where they declarated.
  As example all</p>
<pre><code class="lang-css">  .media-width(@extremum, @break) {
      your code
  }</code></pre>
<p>  Will go to</p>
<pre><code class="lang-css">  .media-width(@extremum, @break));</code></pre>
<p>  By default you can find it <code>_responsive.less</code> file in li
  &nbsp;</p>
</div></article><article id="responsive-breakpoints" class="section"><div class="docs"><a href="#responsive-breakpoints" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="responsive-breakpoints">Responsive breakpoints</h1>
<p>  In Magento UI library there are predefined variables for breakpoints.</p>
<pre><code class="lang-css">  @screen__xxs: 320px;
  @screen__xs: 480px;
  @screen__s: 640px;
  @screen__m: 768px;
  @screen__l: 1024px;
  @screen__xl: 1440px;</code></pre>
<p>  &nbsp;</p>
</div></article></section><div class="bar bottom"><div hidden class="settings container"><!-- Icons from http://iconmonstr.com--><button title="Desktop (1280)" data-width='1280'><svg viewBox="0 0 412  … [Строка слишком длинная. Вы можете скачать файл]