1

好吧，我不确定我得到了响应式布局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">

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

4

3 回答 3

4

就像它说的那样......

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

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

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

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

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

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

于 2013-05-24T20:26:24.500 回答
2

此处的文章提供了重要的细节。

什么是移动优先？

从编码的角度来看，移动优先意味着您的基本样式通常是单列、完全流畅的布局。您使用 @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;
}
}

希望能帮助到你。

编辑：这里的另一篇文章用更多细节解释了上面的例子。摘录如下——

渐进式查询

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

支持IE和旧版浏览器

于 2013-10-14T10:49:00.123 回答
1

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

在此处输入图像描述

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

于 2016-05-26T11:14:03.377 回答