移动设备优先的设计方法很棒——它专注于对用户真正重要的东西，它得到了很好的实践，多年来一直是一种常见的设计模式。所以开发你的CSS移动优先应该也很棒......对吧？好吧，不一定。经典的移动优先CSS开发基于覆盖样式声明的原则：您以默认样式声明开始您的CSS，并在最小宽度处覆盖和/或添加新样式，为更大的视口添加断点（有关详细概述，请参阅“什么是移动优先CSS，为什么它如此受欢迎？”）。但是所有这些异常都会造成复杂性和低效率，进而导致测试工作量增加和代码库维护难度加大。承认吧——我们当中有多少人愿意这样做？在你自己的项目中，移动优先CSS可能仍然是完成这项工作的最佳工具，但首先你需要评估它是否适合你正在处理的视觉设计和用户交互。为了帮助您入门，这里是我的方法，用于解决您需要注意的因素，并在移动优先似乎不适合您的项目时讨论一些替代解决方案。移动优先的优势移动优先CSS开发的一些优势——以及为什么它长期以来一直是事实上的开发方法——是有道理的：开发层。毫无疑问，您从移动优先中获得的好处之一是一个很好的开发层次结构——您只需专注于移动视图并开始开发。尝试和测试。这是一种行之有效多年的可靠方法：它很好地解决了问题。优先考虑移动视图。移动视图是最简单的，也可以说是最重要的，因为它涵盖了所有关键的用户旅程，并且通常占用户访问的更高百分比（取决于项目）。防止以桌面为中心的开发。由于开发是使用台式计算机完成的，因此最初关注桌面视图可能很诱人。但是从一开始就考虑移动可以防止我们以后陷入困境；没有人愿意花时间改造以桌面为中心的网站以在移动设备上工作！移动优先的缺点设置样式声明然后在更高的断点处覆盖它们可能会产生不良后果：更复杂。断点层次结构越往下，从较低断点继承的不必要代码就越多。更大的CSS特异性。在类名声明中恢复为浏览器默认值的样式现在具有更大的特异性。当您希望CSS选择器尽可能简单时，这对于大型项目来说可能是一件令人头疼的事情。需要更多的回归测试。在较低视图中对CSS的更改（例如添加新样式）需要对所有较高断点进行回归测试。浏览器无法确定CSS下载的优先级。在更广泛的断点上，经典的移动优先最小宽度媒体查询没有利用浏览器按优先顺序下载CSS文件的能力。属性值覆盖问题覆盖值没有错。CSS就是为此而设计的。尽管如此，继承不正确的值并没有帮助，而且可能是繁重且低效的。当您必须覆盖样式以将其重置为默认值时，它还会导致样式特异性增加，这可能会在以后导致问题，尤其是在您使用自定义CSS和实用程序类的组合时。我们将无法将实用程序类用于已重置为更高特异性的样式。考虑到这一点，我现在开发的CSS更侧重于默认值。这允许我同时开发断点，因为没有特定的顺序，也没有特定的价值链可以追踪。我专注于在封闭的媒体查询范围（即任何具有最大宽度集的范围）内寻找常见样式和隔离特定异常。这种方法打开了一些机会，因为您可以将每个断点视为一张白纸。如果一个组件的布局看起来应该在所有断点处都基于Flexbox，那很好，在默认样式表中编码。然而，如果Grid对于大屏幕看起来更好，而Flexbox对于移动设备看起来更好，那么当CSS被放??在一个封闭的媒体查询范围内时，这些都可以完全独立地完成。此外，并发开发要求您预先对所有断点的任何给定组件有一个很好的理解。这有助于在开发过程的早期发现设计中的问题。我们不想掉进为移动设备构建复杂组件的兔子洞，然后到达桌面设计时发现它们同样复杂并且与我们为移动视图创建的HTML不兼容！虽然这种方法并不适合所有人，但我鼓励您尝试一下。有很多工具可以帮助并发开发，例如ResponsivelyApp、Blisk等。话虽如此，我认为顺序本身并不是特别相关。如果您习惯于专注于移动视图，对其他断点的需求有很好的了解，并且更喜欢一次在一个设备上工作，那么一定要坚持经典的开发顺序。识别常见样式和异常非常重要，这样您就可以将它们放入相关样式表中——一种手动摇树过程！就个人而言，我发现在跨断点处理组件时这会更容易一些，但这绝不是必需的。实践中封闭的媒体查询范围在经典的移动优先CSS中，我们覆盖样式，但我们可以通过使用媒体查询范围来避免这种情况。为了说明差异（为简洁起见，我使用SCSS），我们假设存在三种视觉设计：小于768从768到1024小于1024和更大作为一个简单的例子，块级元素的默认填充值为“20px"，在平板电脑上被覆盖为"40px"并在桌面上设置回"20px"。经典最小宽度移动优先：.my-block{padding:20px;@media(min-width:768px){填充:40px;}@media(min-width:1024px){填充:20px;}}封闭媒体查询范围：.my-block{padding:20px;@media(min-width:768px)and(max-width:1023.98px){padding:40px;}}细微的区别在于，移动优先示例将默认填充为“20px”，然后在每个断点处覆盖它，总共3次。相反，第二个示例将默认填充设置为“20px”，并且仅在不是默认值的相关断点处覆盖它（在这种情况下平板电脑是例外）。目标是：仅在需要时设置样式。不要让他们期望以后会一次又一次地掩盖他们。为此，封闭的媒体查询范围是我们最好的朋友。如果我们需要对任何给定视图进行更改，我们会在适用于特定断点的CSS媒体查询范围内进行更改。我们将不太可能引入不需要的更改，并且我们的回归测试只需要关注我们实际编辑过的断点。以上面的例子为例，如果我们发现.my-block桌面上的间距已经被断点处的margin考虑进去了，既然我们想彻底去除padding，那么我们可以通过设置外壳中移动设备上的填充以在媒体查询的上下文中执行此操作。.my-block{@media(max-width:767.98px){填充:20px;}@media(min-width:768px)and(max-width:1023.98px){padding:40px;}}视图我们的块默认值为“0”，所以我们可以将移动设备包装在带有填充的封闭媒体查询中，而不是添加桌面媒体查询并使用未设置或“0”作为值（移动设备优先，因为它现在是一个例外）所以它不会在更宽的断点处被拾取。在桌面断点处，我们不需要设置任何样式，因为我们需要浏览器默认值。paddingpaddingpaddingbundlingvsseparatingCSS过去，由于浏览器对并发请求数的限制（通常在6左右），因此将请求数保持在最低限度很重要。结果，使用imagesprites和CSSbundling成为常态，所有CSS一次下载，作为一个具有最高优先级的样式表。随着HTTP/2和HTTP/3的出现，请求的数量不再是过去的大问题。这允许我们通过媒体查询将CSS拆分为多个文件。这样做的明显好处是浏览器现在可以请求它当前需要的CSS而不是它不需要的CSS。这样效率更高，并减少了页面呈现被阻止的总时间。您使用的是哪个HTTP版本？要确定您使用的是哪个版本的HTTP，请访问您的网站并打开浏览器的开发人员工具。接下来，选择网络选项卡并确保协议列可见。如果“h2”列在协议下，则使用HTTP/2。注意：要在浏览器的开发人员工具中查看协议，请转到“网络”选项卡，重新加载页面，右键单击任何列标题（例如，名称），然后选中“协议”列。另外，如果您的站点仍在使用HTTP/1...为什么？！！你在等什么？HTTP/2有很好的用户支持。拆分CSS将CSS拆分为单独的文件是一项值得完成的任务。将单独的CSS文件与相关的媒体属性链接，允许浏览器立即识别哪些文件是需要的（因为它们是渲染阻塞的），哪些可以延迟。基于此，它为每个文件分配适当的优先级。在以下移动断点访问的网站示例中，我们可以看到移动和默认CSS以“最高”优先级加载，因为当前需要它们来呈现页面。其余CSS文件（Print、Tablet和Desktop）仍会下载供以后使用，但优先级最低。使用捆绑的CSS，浏览器必须下载CSS文件并解析它才能开始呈现。虽然如前所述，CSS被分离到不同的文件中，链接并标记相关媒体属性，但浏览器可以优先考虑当前需要的文件。使用封闭的媒体查询范围允许浏览器在所有宽度上执行此操作，这与经典的移动优先最小宽度查询相反，其中桌面浏览器必须下载具有最高优先级的所有CSS。我们不能假设桌面用户总是有快速连接。例如，互联网连接在许多农村地区仍然很慢。媒体查询和单独的CSS文件的数量将根据项目要求因项目而异，但可能类似于下面的示例。捆绑的CSS
