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

【问题标题】：What's the difference between mobile first and non mobile first responsive layout?移动优先和非移动优先响应式布局有什么区别？
【发布时间】：2016-05-26 21:01:09
【问题描述】：

嗯，我不确定mobile first 和non mobile first 响应式布局之间的区别？

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

使用带有 CSS 的媒体查询（也适用于非移动优先布局）
从移动设备开始创建布局，而不是从桌面版本开始

我发现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">

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

【问题讨论】：

移动优先意味着为移动设计和扩展，非移动优先则相反。此外，对于本网站来说，这并不是一个真正的问题，您可以通过简单的搜索找到大量资源。

标签： css responsive-design media-queries

【解决方案1】：

正如它所说的那样......

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

移动优先意味着从一开始，它就是按照您希望它在移动设备中的外观而设计的。然后在大多数情况下，您会使用 min-width 媒体查询来根据更大的屏幕尺寸进行调整。

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

我听说浏览器对 min-device-width 和 max-device-width 的理解存在问题。只需使用 min-width 和 max-width。

如果您设计的是响应式主题，最好先开始移动。

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

【讨论】：

移动优先似乎导致网站在桌面上查看时笨拙且难以使用，因为大部分屏幕都被空白空间浪费了，页面元素太大而太多它们之间的空间，并且需要大量滚动。这无疑是开发人员的懒惰，但为什么要让 50% 的受众更难使用您的网站呢？ RD 应该针对所有设备优化您的站点。首先应该是一个多余的问题。

【解决方案2】：

文章here 提供了重要细节。

什么是移动优先？

从编码的角度来看，移动优先意味着您的基本样式通常是单列、完全流畅的布局。您可以使用 @media (min-width: 不管) 在其上添加基于网格的布局。

替代方案（桌面优先）涉及从基于网格的宽布局开始，然后使用@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;
}
}

希望对你有帮助。

编辑：另一篇文章here 用更多细节解释了上述示例。摘录如下-

渐进式查询

由于一些较旧的移动设备可能根本不支持媒体查询，在查询中装瓶您的 CSS 规则的小版本可能让它无法识别它可以在其中呈现的 CSS。代替这可能是一个好主意，让较小的版本成为 “默认”，同时为大屏幕添加额外的 CSS 规则通过媒体查询（因为桌面浏览器更有可能识别媒体查询）。

支持 IE 及旧版浏览器

css3mediaqueries.js

respond.js

【讨论】：

这是错误的，而且一直都是。移动浏览器早在 IE 之前就已经识别了@media 规则。它们主要是为了支持小屏幕设备而开发的。在 2013 年，对于跨平台站点，您将使用 @media max-width 用于小屏幕 CSS，这样您的站点仍然可以在桌面上的 IE 中运行。反过来做，IE 用户就会被搞砸。值得庆幸的是，我们现在可以放弃 IE8 支持。

【解决方案3】：

从移动优先的观点出发，我们首先在较小的平台上加载绝对的基本要素。这会带来更快捷的体验，避免不必要的延迟。额外的资源会根据需要严格加载到能够很好地处理它们的平台上。

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

【讨论】：