Css 什么'；移动优先和非移动优先响应布局的区别是什么？_Css_Responsive Design_Media Queries

Css 什么'；移动优先和非移动优先响应布局的区别是什么？

css responsive-design

Css 什么'；移动优先和非移动优先响应布局的区别是什么？,css,responsive-design,media-queries,Css,Responsive Design,Media Queries,嗯，我不确定我是否了解了移动优先和非移动优先响应式布局之间的区别这就是我所知道的，可能有点不对劲：将媒体查询与CSS结合使用（也适用于非移动第一布局）从移动版而不是桌面版开始创建布局我已经看到了bootstrap设置和foundation设置之间的差异，这对这种差异很重要吗   <meta name="viewport" content="wi

嗯，我不确定我是否了解了

移动优先

和

非移动优先

响应式布局之间的区别

这就是我所知道的，可能有点不对劲：

将媒体查询与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">

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

正如上面所说的

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

首先，移动意味着从一开始，它就被设计成你希望它在移动中的样子。然后，在大多数情况下，您可以使用最小宽度媒体查询来根据较大的屏幕大小进行调整

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

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

如果你要设计一个响应性强的主题，最好先启动手机

观看此视频：

正如它所说

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

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

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

如果你要设计一个响应性强的主题，最好先启动手机

观看此视频：

文章提供了重要的细节

什么是移动第一？

从编码的角度来看，Mobile first意味着您的基本样式通常是一个单列、完全流畅的布局。您可以使用@media（minwidth:whatever）在上面添加基于网格的布局

另一种选择——桌面优先——是从一个宽的、基于网格的布局开始，然后使用@media（max width:whatever）缩小到一个单列布局

为什么要先移动？

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

想象一下，在一部旧的、动力不足的功能手机上，试图阅读大屏幕布局中的小文本

Mobile first web design将渐进式增强扩展到网站布局，允许您为所有设备提供简单易读的内容，并为功能更强的设备提供分层结构和演示

最新Dreamweaver 6流体布局的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和旧浏览器