移动优先和桌面优先的状态

​
您是否经常考虑实施移动优先还是桌面优先的方法？最近，我在 Twitter 上分享了一项关于移动优先与桌面优先的调查，结果很有趣。

总票数为 648，统计如下：

移动优先：33.3%
桌面优先：21.9%
两者的混合：24.7%
在本文中，我将与您探讨每种方法的含义，我将尝试发现并查看它是否仍然适用于今天，以及当今响应式设计的一些技巧。

简介：每一个是什么意思？
术语“移动优先”意味着在开发网站时，我们首先开始为较小的视口尺寸编写 CSS，然后使用 CSS 媒体查询来改变较大视口（例如：平板电脑或台式机）的体验。

考虑以下示例。

.section {
padding: 2rem 1rem;
}

@media (min-width: 62.5rem) {
.section {
display: flex;
align-items: center;
gap: 1rem;
padding: 4rem 2rem;
}
}

我们有一个padding用于移动的部分，当视口足够大时，它应该是一个具有更大填充的 flex 包装器。

这是一个简化的例子。想象一下整个网站或网络应用程序的规模。

另一方面，当我们使用桌面优先时，情况正好相反。

.section {
display: flex;
align-items: center;
gap: 1rem;
padding: 4rem 2rem;
}

@media (max-width: 62.5rem) {
.section {
display: block;
padding: 2rem 1rem;
}
}

我们首先为较大的视口大小编写 CSS，然后使用 CSS 媒体查询为较小的视口更改 CSS。

移动优先作为工作流程看起来如何？
您是否打开 DevTools 并从那里开始开发，甚至无需查看桌面大小？还是应该同步进行？即：同时为桌面编写 CSS 移动优先和增强？

我可以想到两种情况：

处理移动设备的完整页面。完成后，我们开始增强更大的尺寸。
并行工作。我的意思是，从移动优先开始，然后针对更大的尺寸进行增强，分别处理每个部分/组件。
你通常使用哪一种？对我来说，第二个更好。我更喜欢单独处理每个组件/部分，以便我可以专注于它。此外，这个过程将减少在编写 CSS 时犯的错误。

当您开始移动优先然后为桌面增强时，您可能会为平板电脑和桌面重写 CSS。考虑下图：

我们以英雄部分为例。

.hero {
display: flex;
align-items: flex-end;
background-image: url(‘hero.jpg’);
background-size: cover;
background-repeat: no-repeat;
}

.hero__thumb {
max-width: 320px;
display: block;
}
}

在移动设备上，英雄有一个背景图片，而在桌面上，背景是纯色的，并且有一个图片位于最右边。如您所见，CSS 是移动优先的，除了font-size和之外，我们没有太多覆盖background。

导航呢？移动优先的方法会是什么样子？这里是。

.nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: auto;
padding-top: 2rem; /* Space for the toggle */
}

<span style="color:#445588"><strong>.nav__toggle</strong></span> {
    display: <span style="color:#0086b3">none</span>;
}

<span style="color:#445588"><strong>.nav__item</strong></span>:hover {
    color: <span style="color:#008080">blue</span>;
    background-color: initial;
}

<span style="color:#445588"><strong>.nav__item</strong></span>:not<strong>(</strong>:last-child<strong>)</strong> {
    border-bottom: <span style="color:#009999">0</span>;
    border-left: <span style="color:#009999">1px</span> <span style="color:#0086b3">solid</span> <span style="color:#009999">#fff</span>;
}

}

您是否看到其中的 CSS 覆盖量与桌面视图的 CSS 相结合？这不是一件好事。

不仅如此，这也可能导致 CSS 特异性问题。假设开发人员希望使用以下 CSSborder-bottom从 中删除.nav__item。

.nav__item {
border-bottom: 0;
}

它不会起作用，因为:not在这种情况下伪类具有更高的特异性。

仅当您使用以下其中一种方法时，它才有效：

.nav .nav__item {
border-bottom: 0;
}

.nav__item:not(:last-child) {
border-bottom: 0;
border-left: 1px solid #fff;
}

桌面首先看起来像工作流程吗？
基于之前的相同示例，我们将翻转事物并探索桌面优先解决方案。

.nav {
display: flex;
align-items: center;
background-color: blue;
}

<span style="color:#445588"><strong>.nav__toggle</strong></span> {
    display: <span style="color:#0086b3">block</span>;
}

<span style="color:#445588"><strong>.nav__item</strong></span>:not<strong>(</strong>:last-child<strong>)</strong> {
    border-bottom: <span style="color:#009999">1px</span> <span style="color:#0086b3">solid</span> <span style="color:#009999">#fff</span>;
}

}

使用这种方法，我们的覆盖次数比使用移动优先的方法少。这不是很有趣吗？原因是通过使用max-width媒体查询，我们将特定设计范围限定为特定视口宽度。

我们不是为移动优先编写 CSS，然后为桌面覆盖它们，而是相反。

这是并排的视觉比较。请注意，桌面优先看起来更短并且没有重复（嗯，它有，但有一点）。

提示：确保测试布局闪烁。

范围样式：更好的方法
就在这里。对我来说，我宁愿不坚持特定的方法。相反，我喜欢将它们混合在一起。这意味着，我们需要首先编写基本样式，然后我们开始考虑移动和桌面会发生什么。我喜欢 Elad Shechter 在这篇很棒的文章中首先称其为基础的方式。

让我们举一个抽象的例子。

.nav {
/* Base styles: not related to any viewport size */
}

/* Mobile styles */
@media (max-width: 799px) {
.nav { … }
}

如您所见，样式是根据视口大小确定的。这意味着我们不需要做任何覆盖。这种方法对于在移动设备和桌面设备上看起来完全不同的组件很有用。在我们的例子中，它是导航。

然而，对于像 a 这样的东西