html - CSS - 优化同一元素的恒定屏幕尺寸变化以提高性能

Question

下面是我需要优化屏幕尺寸的网页的屏幕截图。导航栏上方带有 Logo 、白色背景和左侧俱乐部的水平栏是我想要优化屏幕尺寸 CSS 代码的内容。我几个月前才开始使用 html 和 css。

Webpage

从 1230px 开始，左边距增加 0.8px。有没有办法通过 35+“@media screen and (min-width: #px)”来提高网页性能，以满足 1930px 或更大的屏幕最小宽度？或者这么多不会影响页面性能吗？

/* 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 复制和粘贴代码，并每隔 10px 调整一次 margin-left 规则。从编程的 Angular 来看，这肯定有问题。这不会影响性能(好吧，也许在调整浏览器窗口大小时变化很快)，但是你的 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 的 Angular 来看)。因此，当它大于 1200px 时，您将获得想要在所有 Logo 之间共享的大小，并将其除以某个常数，该常数可以是这些 Logo 的数量，或多或少。您可以根据需要进行调整。

更聪明的方法是查看 display: flex 和 justify-content 规则。我将在此处留下此链接以获取更多信息: https://tailwindcss.com/docs/flexbox-justify-content/

希望这有用，祝你好运!