我已经阅读了很多资料，其中指出移动优先设计几乎是必不可少的，我不能否认它确实具有明显的好处，例如，移动装置的加载时间更快，而通过3G和4G的下载速度通常较慢。

但是，如果您要建立一个图片很少的小型网站该怎么办。

我想听听其他人在这个问题上的看法，以及人们是否认为有例外。就个人而言，我更喜欢先为桌面设计/编码，然后再从那里进行缩小。但是，首先为移动设备设计/编码真的重要吗，还是最终结果不够重要以至于不能在某些情况下打扰？

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

设计过程中最困难的部分始终是修剪，从不添加。因此，您所允许的屏幕空间越小，您就需要考虑的内容就越多，这对于您的设计至关重要，您真正需要显示哪些信息。另外，您还会强迫自己考虑可访问性，因为文本和其他项会更小。

设计“轻型”版本后，您就可以继续添加诸如设计元素之类的额外内容，并在获得不动产时将其放大。正如@Django指出的那样，您永远都不应在设计中遗漏任何功能。

对于您的站点，菜单可以是一个示例。您决定离开菜单项，并用一个汉堡包图标代替它，这是标准过程。但是，如果菜单项是页面上最重要的内容之一，则您不想将其隐藏在单击后。

旁注：您网站上的蓝色红色确实对色盲不利，请考虑更改此设置。

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

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

让我们看看两者。

移动优先设计

移动率先设计是为帮助您在功能和可用性削减下来，你有什么需要。它背后的想法是这样的：首先要从移动设备开始，而不是先设计桌面，然后再努力将您想出的所有功能放入320px宽的显示器中并保持良好的UX。

如果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。

如果您以前不了解，我希望这可以使事情变得更清晰！

“移动优先”的由来

响应式设计中的“移动优先”的想法来自于移动设备的浏览器功能远不如台式设备的浏览器强大的时代。他们中的许多人根本不支持媒体查询，因此构建精美的桌面设计，然后使用媒体查询来缩小视口以保留样式的想法浮出水面。

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

- 布莱恩·里格（Bryan Rieger）

移动优先仍然有意义吗？

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

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

比较“桌面优先”方法：

.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文件，并使用link元素上的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响应式设计网站 （也可以使用许多其他选项），还可以针对适合移动设备的网站优化图片，这也将减少加载时间。

对我来说，首先使用移动设备的主要原因是为了避免出现以下情况：您的移动设备网站无法完成台式机版本的所有工作。在很多网站上，我必须要求手机上的桌面版本才能执行某些操作，因为即使手机可以做到，但手机版本却无法。那使我不高兴。

就是说，我认为只要您不像大多数公司那样在移动功能上略过一会，首先使用桌面优先就可以了。

同样，许多设计框架使这一过程变得非常简单。我使用Material Design Lite制作了一个相当复杂的桌面优先应用程序，当我将其修改为适合移动设备的版本时，实际上只需要更改几件事-大多数工作已经完成。