Html 最小宽度媒体查询规则的移动优先方法是什么

他们总是说min width@media rule是首先为移动设备构建的方法，我读了很多关于它的文章，但我仍然无法理解min width rule到底是如何工作的>，但max width很容易理解

 @media only screen and (min-width: 400px) {....some rule here.....}
 @media only screen and(min-width: 900px){......some rule here....}

我的问题和困惑是：可以在同一个样式表上同时使用这两个断点吗？首先，它对移动设备有什么好处

---

我需要一个可容忍的回答，请不要对那些喜欢向下投票的人进行向下投票。请容忍并友好地帮助放置。

事实上，使用

min width

确实有助于首先制作网络手机

让我们举个例子

我们正在创建一个可扩展到两个视口的web，例如300px、300px+设备。

1） 使用

最小宽度

body {
  background: yellow;
}

// 300px+ devices
@media (min-width: 300px) {
  body {
    background: red;
  }
}

body {
  background: red;
}

// 300px- devices
@media (max-width: 300px) {
  body {
    background: yellow;
  }
}

body {
  background: yellow;
}

// 300px - 600px devices
@media (min-width: 300px) {
  body {
    background: red;
  }
}

// 600px+ devices
    @media (min-width: 600px) {
      body {
        background: green;
      }
    }

body {
  background: green;
}

// 600px- devices
@media (max-width: 600px) {
  body {
    background: red;
  }
}

// 300px- devices
    @media (max-width: 300px) {
      body {
        background: yellow;
      }
    }

此处，

300px+

设备的背景色被覆盖

2） 使用

最大宽度

body {
  background: yellow;
}

// 300px+ devices
@media (min-width: 300px) {
  body {
    background: red;
  }
}

body {
  background: red;
}

// 300px- devices
@media (max-width: 300px) {
  body {
    background: yellow;
  }
}

body {
  background: yellow;
}

// 300px - 600px devices
@media (min-width: 300px) {
  body {
    background: red;
  }
}

// 600px+ devices
    @media (min-width: 600px) {
      body {
        background: green;
      }
    }

body {
  background: green;
}

// 600px- devices
@media (max-width: 600px) {
  body {
    background: red;
  }
}

// 300px- devices
    @media (max-width: 300px) {
      body {
        background: yellow;
      }
    }

此处，

300px-

设备的背景色被覆盖

现在，在应用程序时间表中，您需要支持600px+设备

3） 使用

最小宽度

body {
  background: yellow;
}

// 300px+ devices
@media (min-width: 300px) {
  body {
    background: red;
  }
}

body {
  background: red;
}

// 300px- devices
@media (max-width: 300px) {
  body {
    background: yellow;
  }
}

body {
  background: yellow;
}

// 300px - 600px devices
@media (min-width: 300px) {
  body {
    background: red;
  }
}

// 600px+ devices
    @media (min-width: 600px) {
      body {
        background: green;
      }
    }

body {
  background: green;
}

// 600px- devices
@media (max-width: 600px) {
  body {
    background: red;
  }
}

// 300px- devices
    @media (max-width: 300px) {
      body {
        background: yellow;
      }
    }

添加新的媒体查询以支持600多台设备，无需更改现有样式表

4） 使用

最大宽度

body {
  background: yellow;
}

// 300px+ devices
@media (min-width: 300px) {
  body {
    background: red;
  }
}

body {
  background: red;
}

// 300px- devices
@media (max-width: 300px) {
  body {
    background: yellow;
  }
}

body {
  background: yellow;
}

// 300px - 600px devices
@media (min-width: 300px) {
  body {
    background: red;
  }
}

// 600px+ devices
    @media (min-width: 600px) {
      body {
        background: green;
      }
    }

body {
  background: green;
}

// 600px- devices
@media (max-width: 600px) {
  body {
    background: red;
  }
}

// 300px- devices
    @media (max-width: 300px) {
      body {
        background: yellow;
      }
    }

虽然我们需要额外的

媒体查询

规则来支持600多台设备，但我们需要更改全局

主体

背景色

来支持新的断点

现在比较1）与3）和2）与4）， 您将注意到支持新断点

对于1到3，我们不需要更改现有的样式规则，只需在其上添加新的规则

但对于2到4个断点，修改了现有规则以支持新断点

摘要

因此

minwidth

确保了未来友好的渐进式增强（移动优先）

---

但是，

max width

LED指示灯出现近视现象，需要降级（mobile last）

在我看来，您似乎还没有完成您的研究，并要求我们为您完成。请引用一位官方或知名人士的话“他们总是说min width@media rule是先为手机构建的方式”。他们是谁？手机优先的意思是：普通代码适用于手机。对于桌面，使用

@media

查询应用覆盖。

最小宽度

和

最大宽度

，取决于应用的内容。举个例子，Bootstrap两者都有。也许你是对的，但感谢你的输入，它确实很有用，“移动优先”的意思是：普通代码适用于移动设备。对于桌面MOD，你可以在里面添加额外的规则。真正有用的palMobile优先的意思是：为移动设备开发CSS。当你高兴时，打开逐渐变大的屏幕，开始使用

@media

查询添加覆盖。因为您希望应用从特定宽度向上的覆盖，所以在首先构建mobile时将使用

minwidth

更多。首先构建桌面时，您将使用

max width

更多。从你所说的，你更容易先写桌面。所以坚持下去。这里没有对错之分。首先，手机的优势在于，对于那些不知道它意味着什么的人来说，它听起来更好。所以更容易销售。但是，如果做得好，它们是一样的。使用最小宽度的一个优点是可以使用很好的整数。对于至少具有800px的设备，您只需编写800px！使用max width时，您必须写入799px，然后希望在具有分数像素的高分辨率设备上不会出现问题。我不确定您为什么认为首先设计桌面是一种短视的方法。如果您希望背景为绿色（较小屏幕除外），则示例4可以。示例2和示例4之间的区别在于设计发生了变化，而不是您做错了。@MrLister，市场上有不同大小的桌面，因此desktop first假设用户将使用一定大小的桌面宽度。现在，假设为

-lg-

设备（1200px+）开发了一个页面，但是相同的布局将导致（1900px+）设备的元素难以拉伸。如果现在在某些电视屏幕（等待区、监控软件屏幕）中需要呈现相同的页面，而这些屏幕现在不需要滚动页面，该怎么办。开发者将面临同样的情况，现在在这种情况下，桌面介于移动平板电脑和桌面电视之间。我的观点是，页面的设计应该考虑手机或电视的一端，但屏幕大小没有大写限制，但尺寸较小，可以在不影响现有布局的情况下进行更改。如果有比电视更大屏幕的新设备出现呢！上述场景的用例很少，但您不能排除页面在超大屏幕上呈现的可能性。如果将来通过投影仪支持引导布局会怎么样！谢谢你，你的解释很详细。但有一个问题是，从您的示例中可以看出，由于两个断点处的相同元素（主体是样式）似乎会被另一个断点覆盖，因为第一个规则对第二个断点也适用