从纯粹的设计角度来看，首先从移动版本开始是有意义的。

设计过程中最难的部分总是修剪，从不添加。因此，您允许自己的屏幕空间越小，您就越需要考虑在您的设计中什么是重要的，您真正需要显示什么信息。此外，你也会强迫自己考虑可访问性，因为文本和其他项目会更小。

一旦你设计了“轻”版本，你就可以继续添加额外的东西，比如设计元素，并在你获得房地产时扩大东西。正如@Django 所指出的，您永远不应该在设计中遗漏功能。

对于您的站点，一个示例可能是菜单。您决定离开菜单项并将其替换为汉堡图标，这是标准程序。但是，如果菜单项是页面上最重要的内容之一，您不会希望在单击后将它们隐藏起来。

旁注：您网站上的蓝底红字对色盲者非常不利，请考虑更改此设置。

移动优先是最佳实践——这不是法律，如果您了解为什么“应该”使用它，您就可以就为什么不想在特定项目中使用它做出明智的决定，这很好。

值得注意的是，“移动优先”与设计/用户体验和构建本身有关。移动优先设计不会为用户加速您的网站，但移动优先开发会。

让我们看看两者。

移动优先设计

移动优先设计旨在帮助您根据需要减少功能和可用性。它背后的想法是这样的：与其先设计桌面，然后努力将你想出的所有功能都放在一个 320 像素宽的显示器中并保持良好的用户体验，不如先从移动设备开始......

如果 UX 被您在移动设备上的所有功能弄得杂乱或损坏，那么它应该让您质疑用户是否真的需要它们。你能摆脱其中的一些并真正改善体验吗？如果是这样，你为什么拥有它们？也许它们毕竟不是必需的，也许它们不应该出现在您的网站上。

理论上，这可以帮助您将功能缩减为您绝对需要的功能，然后您可以将其扩展为漂亮的桌面体验。

移动优先发展

在移动优先开发中，首先编写移动版本，然后为更大的屏幕添加异常。这对移动用户来说更好（更快）的原因是：您有两张图片用于网站，一张大的用于桌面，一张较小的用于移动。如果您先编写桌面代码，您的 CSS 将如下所示：

.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 { 
      background-image:url('images/smallimage.png');
    }
}

这意味着移动用户实际上是large.jpg在 CSS 将其关闭之前下载的。这真是太糟了。

移动端首先是这样的：

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 { 
        background-image:url('images/verylargeimage.png');
    }
}

移动用户从不下载large.jpg。

如果您以前不理解它们，我希望这有助于使事情变得更清楚！

“移动优先”的由来

关于响应式设计的“移动优先”的想法来自移动设备浏览器的功能远不如桌面设备上的浏览器。他们中的许多人根本不支持媒体查询，因此构建一个精美的桌面设计，然后使用媒体查询为狭窄的视口坚持风格的想法落空了。

不支持媒体查询实际上是第一个媒体查询。

-布莱恩·里格

移动优先仍然重要吗？

尽管移动设备浏览器已经赶上了桌面浏览器，但“移动优先”仍然是编写样式最合乎逻辑的方式。

我更喜欢从“避免撤销以前的样式声明”的角度来思考。一种附加的方法，而不是写出样式然后在以后覆盖它们，几乎总是会导致更紧凑的样式表。适用于大多数/所有设备的样式应该在媒体查询之外找到，而仅与特定视口相关的样式应该在媒体查询后面。

比较“桌面优先”方法：

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

对于“移动优先”的方法：

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

结果是一样的，但后者更紧凑。示例样式无耻地复制自Brad Frost 的高效媒体查询的 7 个习惯。

有一些罕见的例外情况，“桌面优先”比其他方式更合适。其中最值得注意的是当你在做响应式表格之类的事情时。较宽的视口需要表格的默认样式，但较窄的视口需要覆盖所有这些，以便内容可以垂直堆叠。

不要分解你的样式表

您绝对不应该做的一件事是将您的响应式样式分解为单独的 CSS 文件并在链接元素上使用 media 属性。这会导致 UA 下载所有链接样式表的不良后果（即，这样做并没有提高速度）。

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

所以代码应该首先是移动的，但是设计方法呢？

我认为这无关紧要。必须完成与设计相关的所有视口的布局（这可能涉及少至 2 个或多达 5 个，一旦您考虑到您可能需要的任何小断点！），最终顺序并不重要。许多设计师缺乏从桌面布局开始的纪律，并发现从移动布局开始更容易。

如果您想从桌面布局开始，您必须避免用不会增强该页面内容的杂乱来填充所有光荣空白的诱惑。你真的需要那个拿着手机微笑的女人的 800x600 库存照片吗？下载无用的绒毛只是让移动用户花费额外的钱，并且只是桌面用户跳过过去的视觉干扰。

我在不同的屏幕尺寸上测试了您的网站www.cosmosdesign.co.nz ，它在所有屏幕上都运行良好。关于您对移动优先设计的问题，我想说您的设计方法必须考虑您的目标受众以及图像、内容等许多其他因素。如果您的目标受众主要在台式机/笔记本电脑上使用该网站，那么您可以肯定会继续您的方法，但如果它是一个主要在手机和标签上查看的网站，那么您需要重新考虑您的策略。

您还可以考虑使用Bootstrap设计响应式网站 （还有许多其他选项可用），您还可以针对移动友好型网站优化图像，这也将减少加载时间。