移动优先和非移动优先响应式布局有什么区别？

Question

嗯，我不确定我是否明白

mobile first

和

non mobile first

响应式布局之间的区别？

这是我所知道的，可能有些地方不对：

1. 将媒体查询与 CSS 结合使用（也适用于非移动优先布局）
2. 从移动设备而不是桌面版本开始创建布局

我发现

bootstrap

设置和

foundation

设置之间存在差异，这种差异重要吗？

<!-- Bootstrap -->
<!-- I've read it's not mobile first -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Foundation -->
<!-- I've read it's mobile first -->
<meta name="viewport" content="width=device-width"> 

我知道的就这么多了，还有什么需要了解的吗？
我在哪里可以找到好的指南？

Answer 1

正如它所说......

“移动优先”和“非移动优先”布局。

移动优先意味着从一开始，它就是按照您希望它在移动设备中的外观呈现的。然后在大多数情况下，您可以使用最小宽度媒体查询来根据更大的屏幕尺寸进行调整。

非移动优先意味着您首先为桌面或大屏幕设计它。然后在大多数情况下使用最大宽度媒体查询返回并使其在较小/移动屏幕上看起来更好。

我听说浏览器对最小设备宽度和最大设备宽度的理解存在问题。只需使用最小宽度和最大宽度。

如果您设计响应式主题，最好首先启动移动设备。

观看此视频：http://www.youtube.com/watch?v=-BVmrSG93XE

Answer 2

文章此处提供了重要的详细信息。

什么是移动优先？

从编码的角度来看，移动优先意味着您的基本样式通常是单列、完全流动的布局。您可以使用@media（最小宽度：无论什么）在其上添加基于网格的布局。

替代方案——桌面优先——涉及从宽的、基于网格的布局开始，并使用@media（最大宽度：无论什么）缩小到单列布局。

为什么移动优先？

iPhone 和 Android 浏览器功能相当强大，但较旧的智能手机、功能手机和游戏机等其他小屏幕设备可能不支持媒体查询。

想象一下尝试在旧的、功能不足的功能手机上阅读大屏幕布局中的小文本。

移动优先网页设计将渐进增强功能扩展到网站布局，使您能够向所有设备提供简单、可读的内容，并为功能更强大的设备提供分层结构和演示。

最新 Dreamweaver 6 Fluid Layout 中的 Mobile First 示例如下 -

/* Mobile Layout: 480px and below. NOTE: No Media Query line here*/

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.*/
/* NOTE: Now from here media query lines are added for Tablets and Desktop */

@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
}

希望有帮助。

编辑：另一篇文章这里解释了上面的例子，并提供了更多细节。摘录如下-

渐进式查询

由于一些较旧的移动设备可能根本不支持媒体查询， 将 CSS 规则的小版本封装在查询中可能会 阻止它识别它可以在其中渲染什么CSS。代替 这可能是一个好主意，让较小的版本成为 “默认”，同时添加适用于大屏幕的附加 CSS 规则 通过媒体查询（因为桌面浏览器更有可能识别 媒体查询）。

支持IE及旧版浏览器

• css3mediaqueries.js
• respond.js

Answer 3

以移动为先的观点，我们首先在较小的平台上加载绝对必需的内容。这会带来更快捷的体验，避免不必要的延迟。额外的资源严格按照需要加载到能够很好处理它们的平台上。

看： http://www.slideshare.net/splashomnimedia/desktopfirst-vs-mobilefirst-web-design

Answer 4

在 Gapsy Studio 撰写的这篇富有启发性的文章中，了解“移动优先”和“响应式”网页设计策略之间的细微差别。无论您是经验丰富的 Web 开发人员、设计师，还是只是对 Web 开发的复杂性感兴趣，本文都提供了宝贵的见解，可以加深您的理解。在这里深入讨论：移动优先与响应式