为什么你必须开始练习移动优先开发

已发表: 2015-01-12

如果您尝试过编写响应式网站的代码，那么您会遇到这个问题：您更改了一个微小的、简单的 CSS 属性，它会改变不同屏幕尺寸的布局。

这迫使您检查并再次检查最新的保证金值是否没有破坏平板电脑或手机的网站。当然，您可以通过针对不同屏幕尺寸的特定覆盖轻松解决此问题。但是在项目过程中，CSS 文件中充满了异常问题。然后有异常的异常，后面再有异常的异常的异常。

它很快变得复杂，你最终会与自己的代码作斗争，花费大量的项目时间，并慢慢失去理智。

但不要害怕！移动优先开发可以让您免于头痛、异常的异常和缓慢的页面加载。

请记住：您永远不应该在实时站点上进行更改。我们免费的本地开发应用程序 Local 将帮助您简化工作流程并安全地试验您的网站。今天就试试吧！

最初为响应式网站的桌面版本进行开发与 CSS 文档的自然流程背道而驰。 CSS 文件从上到下线性读取，因此每个 CSS 属性都会被文档下方应用的任何新样式覆盖。

如何读取 css

通过为大屏幕开发，然后在 CSS 文档的下方添加移动样式，会出现两个问题：

如果没有为移动站点明确覆盖新样式，则对桌面样式（文档中的较高位置）所做的任何更改都将更改移动站点的显示方式。创建多余的无意义的 CSS 行会消耗大量的项目时间，并且违背了 DRY 代码的原则。
移动设备通过呈现所有桌面样式开始加载页面。一旦庞大的桌面版本完成渲染，就会应用移动样式。这会加载额外的资源，这意味着移动设备需要更长的时间才能提供完全加载的页面。

这就是移动优先开发的用武之地。这种方法鼓励正确的 CSS 顺序（从上到下移动到桌面），确保设备仅在需要时应用它需要的信息。

让我们来看看这些问题的一些解决方案。

图片很容易成为网站大小的最大贡献者，如果设备未连接到 wifi，则需要永远下载。从移动样式中删除多余的图像是提高网站速度的最佳方法。

首先迁移到移动设备意味着仅向移动设备提供一些小图像。在下面的示例中，我创建了使用桌面优先和移动优先方法实现的相同 CSS 文档。

桌面与移动

如果您使用的是桌面优先方法，则移动设备将按以下顺序呈现：

但是，如果使用移动优先方法，则设备按以下顺序呈现：

该网站不仅在将完成的页面提供给浏览器之前要运行的步骤更少，而且还消除了对未使用的琐碎图像的额外调用！

请注意，随着移动优先开发，媒体查询将从最大宽度变为最小宽度。最大宽度查询将适用于小于 1000 像素的所有设备，而最小宽度查询将适用于大于 1000 像素的设备。

切换到 min-width 创建了一个障碍，阻止我们为大型设备编写的新样式影响网站在小型设备上的外观。这提高了响应式网站的加载速度，同时确保您在仅限桌面的媒体查询中所做的任何更改都不会影响您的移动布局。这是双赢的！

移动优先的方法不仅适用于网站。您也可以使用它来设计电子邮件！试试看。

假设我们正在开发一个项目，它的 CSS 文件被注释为三个主要部分：台式机、平板电脑和移动设备。

不幸的是，我们遵循了桌面优先的方法，并且该网站在手机上加载缓慢。我们尝试过缩小图像尺寸，添加浏览器缓存，甚至缩小 HTML（粗略）。但是该网站仍然不适合首次访问者，并且需要修复。

由于我们使用桌面优先方法构建网站，我们的 .header 元素的 CSS 看起来像这样：
桌面优先扩展

我们的目标是减少发送到移动设备的样式数量。首先，我们需要清点应用到元素的内容，并在覆盖我们自己的样式时记录下来。

首先，让我们切换到移动优先的方法。我们将使移动设备成为我们默认的非媒体查询样式（注意：不要在生产中这样做，它会破坏网站并使您的客户脾气暴躁）。
移动优先交换

让我们再看看我们的图像，因为这对我们网站的速度影响最大。

由于我们没有在移动设备上加载背景，我们可以删除该属性。我们稍后会在实际需要时为更大的设备添加图像。 margin-bottom 属性也是如此，我们只剩下两个实际需要应用于移动设备的属性！

继续到平板电脑部分，我们需要将背景属性和填充从桌面样式上移到平板电脑样式中，因为平板电脑是下一个要渲染的部分。

请记住，我们的目标是仅在属性发生更改时覆盖属性，并且仅在需要发生更改时添加新属性，如下图所示：
移动优先扩展

好多了！通过检查移动设备如何呈现我们刚刚优化的 CSS，很快就会发现，与桌面优先方法相比，移动优先开发对小型设备的影响有多大。

移动优先优化

开发桌面优先会产生比它修复的问题更多的问题。 “切换到移动优先的开发方法可以让你聪明地工作，而不是努力工作。 ”

在开发响应式网站时，请记住，默认情况下，媒体查询之外的所有内容都会显示。通过使默认（非媒体查询）样式迎合移动设备，我们允许将尽可能少的信息发送到最容易受网站大小影响的设备。

台式机和平板电脑 99.999% 的时间都连接到快速互联网连接，从而可以高速传递大量信息。手机最有可能通过慢速互联网连接加载信息。调整样式表以适应最敏感的设备使您能够为客户提供最好的网站。