CSS - оптимизация постоянных изменений размера экрана для одного и того же элемента для повышения производительности

Question

Ниже скриншота ниже веб-страницы, для которой мне нужно оптимизировать размеры экрана. Горизонтальная полоса над панелью навигации с логотипами, белым фоном и трещинами слева - это то, для чего я хочу оптимизировать CSS-код размера экрана. Я только начал работать с html и css несколько месяцев назад.

Веб-страница

С 1230px поле слева увеличивается на 0.8px. Есть ли способ повысить производительность веб-страниц с помощью 35+ «экрана @media и (min-width: #px)», которые понадобятся для отображения минимальной ширины экрана 1930 пикселей или более? Или это вообще не повлияет на производительность страниц?

/* Team Logos spacing for different screen sizes */
        @media screen and (min-width: 1200px)
        {
            .clubs .llul .logoli
            {
                margin-left: 0px;
            }
        }

        @media screen and (min-width: 1210px)
        {
            .clubs .llul .logoli
            {
                margin-left: 0.45px;
            }
        }

        @media screen and (min-width: 1220px)
        {
            .clubs .llul .logoli
            {
                margin-left: 0.9px;
            }
        }

        @media screen and (min-width: 1230px)
        {
            .clubs .llul .logoli
            {
                margin-left: 1.3px;
            }
        }

        @media screen and (min-width: 1250px)
        {
            .clubs .llul .logoli
            {
                margin-left: 2.1px;
            }
        }
        .
        .           
        ./* Rest of code between 1250px and 1630px */ 
        .
        .
        @media screen and (min-width: 1630px)
        {
            .clubs .llul .logoli
            {
                margin-left: 17.3px;
            }
        }

        @media screen and (min-width: 1650px)
        {
            .clubs .llul .logoli
            {
                margin-left: 18.1px;
            }
        }

Я также добавил фрагмент кода позади элемента. Остальная часть CSS для него не показана.

<div class="clubs">
  <p style="display: inline;">Clubs</p>
  <ul class="llul">
     <li class="logoli"> <img class="logoT" style="" src="media/teams/smlafel.JPG" alt="fl">
        <ul class="llul">
           <li class="logoli" style="padding-left: 10px;"> <b>Africa Elite</b> </li>
           <li class="logoli"> <a href="#"> <img class="logoT" style="" src="media/teams/smlafel.JPG" alt="fl"> <b>Africa Elite</b> &nbsp; &nbsp;[Men's Premier Division] </a> </li>
        </ul>
     </li>
  </ul>
</div>

Answer 1

Пожалуйста, не делай таких вещей. Вы просто копируете и вставляете свой код для .clubs .llul .logoli и корректируете правило margin-left каждые 10px. С точки зрения программирования определенно что-то не так. Это не влияет на производительность (ну, может быть, когда размер окна вашего браузера изменяется быстро), но ваш CSS-файл будет намного более грязным и тяжелым, чем должен, поэтому, когда браузер сначала загрузит этот файл, затем загрузит страница, это может занять некоторое время.

Решение здесь заключается в следующем:

@media screen and (max-width: 1200px) {
  .clubs .llul .logoli {
    margin-left: 0px;
  }
}

@media screen and (min-width: 1200px) {
  .clubs .llul .logoli {
    margin-left: calc((100vw - 1200px) / NUMBER_OF_ELEMENTS);
  }
}

Где 100vw - это всегда ширина окна (с точки зрения CSS). Поэтому, когда оно больше 1200px, вы получаете размер, который хотите разделить между всеми вашими логотипами, и делите его на некоторую константу, которая может быть больше или меньше числа этих логотипов. Вы можете настроить его так, как вам нравится.

Еще более хитрый способ - взглянуть на правила display: flex и justify-content. Я оставлю эту ссылку здесь для получения дополнительной информации: https://tailwindcss.com/docs/flexbox-justify-content/

Надеюсь, это было полезно, удачи!

Answer 2

Почему бы вам не использовать svg для логотипов, если они у вас есть в таком формате, они будут масштабироваться до совершенства и читать как код, поэтому оптимизация не требуется