min-width我正在阅读的有关使用媒体查询的大多数教程都在演示max-width.
这是某种设计趋势或模式，为什么人们会min-width过度使用max-width？
例如，我正在设计一个从移动设备开始到桌面的网站。我正在使用 Foundation 4，但使用媒体查询来删除页面上的各种元素并重新定位源顺序。
我面临的一件事是任何宽度为 360 像素或更小的设备的自定义导航。我希望他们有一个垂直导航，而不是一个内联水平。所以我的想法是用来max-width瞄准这些设备。
min-width如果我首先设计移动设备，我应该使用它吗？即所有默认样式都适用于移动设备，因此min-width用于逐步增强布局？
2部分答案
第 1 部分：回答“为什么人们使用最小宽度而不是最大宽度？”：
它与设计流程有关。通常，使用最小宽度模式，您是在设计移动优先。使用最大宽度模式，您可以先设计桌面。
以最小宽度移动优先，默认样式是移动样式。之后的查询会针对逐渐变大的屏幕。
body {
/* default styles here,
targets mobile first */
}
@media screen and (min-width:480px) {
/* style changes when the screen gets larger */
}
@media screen and (min-width:800px) {
/* And even larger */
}
相反，使用最大宽度是桌面优先，然后添加查询以使样式对移动设备友好
body {
/* default styles here,
targets desktops first */
}
@media screen and (max-width:800px) {
/* style changes when the screen gets smaller */
}
@media screen and (max-width:480px) {
/* And even smaller */
}
第 2 部分：对于宽度为 360 像素或更小的任何设备的特定自定义导航：
您可以将其作为单独的最大宽度查询包括在内，如果这是该规则的唯一例外。或者将该样式用作您的基线，然后将其更改为更宽的屏幕。
如果你做了一个例外（这并不是真正遵循移动优先的设计方法），它会是这样的：
body {
/* default styles here,
targets mobile first
ALSO will cover 361 - 479 width */
}
@media screen and (max-width:360px) {
/* style ONLY for screens with 360px or less width */
}
@media screen and (min-width:480px) {
/* style changes when the screen gets larger */
}
etc...
这实际上取决于您的样式表是如何工作的。例如：
@media screen and (min-width:100px) {
body { font-weight:bold; }
}
@media screen and (min-width:200px) {
body { color:#555; }
}
以上两个媒体查询，body如果屏幕大于等于100px，字体加粗，大于等于200px ，颜色加粗#555；
另一个例子：
@media screen and (max-width:100px) {
body { font-weight:bold; }
}
@media screen and (max-width:200px) {
body { color:#555; }
}
与第一个示例不同，这仅在屏幕宽度介于 0 到 100 像素之间时才会使body字体变为粗体和颜色。#555如果它在 0px 和 200px 之间，它将是 color #555。
媒体查询的美妙之处在于您可以组合这些语句：
@media screen and (min-width:100px) and (max-width:200px) {
body { font-weight:bold; color:#555; }
}
在此示例中，您仅针对宽度在 100 像素和 200 像素之间的设备 - 不多也不少。
简而言之，如果您希望您的样式从媒体查询中泄露出来，您可以使用min-width or max-width，但如果您想影响一个非常具体的标准，您可以将两者结合起来。
简而言之，min-width 是移动的第一种方法，max-width 是桌面的第一种方法。
最小宽度是开始应用样式的最小宽度。（必须从最小到最大排序才能正常工作，首先是常规样式）。换句话说：如果设备宽度大于或等于...，则应用一些特定的样式。使用 min-width，只要满足 min-width，样式就会开始并永远持续，并且没有指定 max-width。
最大宽度是继续应用样式的最大宽度。之后，样式将停止应用。（必须从大到小排序才能正常工作，首先是常规样式）。换句话说：如果设备宽度小于或等于...，则应用特定样式。只要宽度大于最大宽度，样式就会停止。
最后，这取决于您要如何实现。有些人可能声称，没有一个正确的解决方案。在我看来，从头开始时 min-width 效果很好，但在改造现有网站时，max-width 通常对我更有意义。
因为您正在开发一个从移动设计开始并随着分辨率增加复杂性的网站，所以我建议您继续使用，min-width因为这遵循相同的工作模式。
从技术上讲，min-width是“移动优先”，因为您通常开始为移动开发并随着分辨率的增加而增加更多复杂性。
然而，该术语因其替代含义而变得更受欢迎，这通常意味着更多地关注移动工作和优先级的增加（主要由不了解技术推理的客户或管理层推动）。这可能就是为什么您最终会在min-width网上看到很多示例（时尚博主撰写有关时尚主题的文章）。
当我处理复杂的桌面设计时，我个人发现编写max-width查询来“简化方程式”可以说更容易。但是使用max-width查询并不能阻止您专注于移动设备，并且仍然可以完全成为“移动优先”策略的一部分。
无论哪种情况，最重要的是一致性。使用一个并坚持该项目。如果项目同时使用两者，它可能会变得非常混乱。
最后一点，尽可能少使用查询是理想的。这可以通过良好的响应式设计来实现。
什么是移动优先和桌面优先方法？
移动优先的样式方法意味着样式首先应用于移动设备。然后通过媒体查询将大屏幕的高级样式和其他覆盖添加到样式表中。
这种方法使用
最小宽度
媒体查询。
这是一个简单的例子：
// This applies from 0px to 600px
body {
background: red;
}
// This applies from 600px onwards
@media (min-width: 600px) {
body {
background: green;
}
}
在上面的例子中，将有一个低于 600 像素的红色背景。它的背景在 600 像素及以上变为绿色。
另一方面，桌面优先的样式方法意味着样式首先应用于桌面设备。然后通过媒体查询将小屏幕的高级样式和覆盖添加到样式表中。这种方法使用 >max-width 媒体查询。
这是一个简单的例子：
// This applies from 600px onwards
body {
background: green;
}
// This applies from 0px to 600px
@media (max-width: 600px) {
body {
background: red;
}
}
所有宽度的背景颜色均为绿色。如果屏幕低于 600 像素，则背景颜色变为红色。
我首先有一个无响应的网站，专为台式机设计。然后通过添加最大宽度媒体查询来增加响应能力。
我的网站现在有 320px、480px、768px、960px 和 1024px 等宽设备的布局，所以我添加了看起来像max-width: 479px、max-width: 767px等的媒体查询max-width: 959px。这工作正常 - 网站的行为应该如此。
但是，我最近发现 Chrome 开发者工具“设备模式”有一个媒体查询工具，它对我非常非常有用。它允许我单击以在 Chrome 在我的页面上找到的每个媒体查询级别显示网站。在设计响应式布局时，这对我有很大帮助。
媒体查询工具使用它在媒体查询中找到的数字，即 479、767、959、1023 等。但这意味着，例如，如果我想看看我的 480 像素宽设备的布局是什么样的，我必须单击最大宽度 767px 级别的媒体查询，这对我来说是非常不直观的。
这让我重新思考了我当前的桌面优先 CSS，我将使用移动优先的方法重写我的 CSS。
我认为使用移动优先的 CSSmin-width将更具可读性，因为您会看到媒体查询min-width: 480px并且知道这将是 480 像素宽设备的 CSS。
我一直在处理的大多数网站都是首先为桌面设计的，在这些情况下使用max-width查询是有意义的。通常，如果您开始使用小屏幕，则首先使用min-width，然后在顶部使用针对更大分辨率的媒体查询。
您当然可以混合最小和最大查询以获得特定的分辨率
也许看看使用min-device-width您在导航中遇到的特定问题