Question

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

从1230px开始，左边距增加0.8px。有没有一种方法可以利用35+的“ @media屏幕和（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的代码，然后每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格式，则为什么不使用它们，它们会按比例放大和缩小至完美并读取类似代码，因此无需优化

CSS-优化同一项目上恒定的屏幕尺寸更改以提高性能

2 个答案: