我为写这么多而道歉，但我想把我正在做的事情放到上下文中。所以我先问我的问题：
当我将“max-width”媒体查询更改为“min-width”基于像素的媒体查询时，为什么链接到响应式导航栏的HTML和CSS会停止工作？
https://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/#nav
我所需要的只是理解为什么我不能使HTML和CSS的行为与基于像素的最小长度媒体查询完全相同。我什么得不到？几年来，我一直在使用响应式网页设计和开发。但这清楚地证明我不理解我需要的响应css。我正在编写一个响应式网站，为我自己的客户编写一个没有Bootstrap的响应式网站，这样我就可以理解我对Ethan Marcotte在第二版响应式网页设计中提出的原则的理解。
我不是因为没有发布我自己的代码而试图变得懒惰。这是我想要为我正在构建的网站使用的完全相同的结构导航栏，您可以直接转到上述链接中的相关HTML和CSS。我已经尝试在上面的链接中创建嵌入式CSS和HTML的链接样式表。我把它作为一个单独的链接样式表注入我自己的网站，但我仍然遇到了同样的砖墙。
我自己的样式表中的断点结构是：
`/* ====MOBILE FIRST===== */
/* Custom, iPhone Retina */
@media only screen and (min-width: 320 px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width: 480 px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width: 768 px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width: 1024 px) {
}
/* Desktop */
@media only screen and (min-width: 1280 px) {
}`
我也不想拥有一个大的怪物样式表，所以我试图将导航栏样式表链接到主样式表，使用：
`@import url('mainstyles.css');`
我知道断点的基本css规则必须进入特定的媒体查询。但是如果上面导航栏链接中的所有CSS都必须进入所有五个“基于最小宽度”的媒体查询 - 这只是CSS膨胀 - 不是吗？还有太多不必要的CSS代码？
我已经花了三天时间而且我无法得到根本原因。在将“最大宽度”媒体查询更改为“最小宽度”基于像素的媒体查询后，如何使上述导航栏完全相同？我已经尝试将“宽度”和所有与显示相关的样式规则改为百分比 - 但它并没有解决根本原因。非常感谢所有建议。 基思：）
答案 0 :(得分：0)
max-width表示查询将以指定的宽度运行。
min-width表示查询将以指定的宽度开始工作。
您的第一个查询将在320px到479px之间运行。您的第二个将在480px到767px之间工作，依此类推（您无法查询0-319px）。
要将max-width更改为min-width，您需要将每个查询提升到一个级别（XS将变为min-width: 320px，桌面将变为min-width: 1024等。 ）
答案 1 :(得分：0)
我在下面提到了一个简单的答案，正如我发现的那样，一旦你掌握了媒体查询的基础知识，它就是一个简单的概念，然后适用于更复杂的想法......
下面的例子可以首先用于智能手机，然后用于iPad，最后是风景iPad和桌面设备......
@media screen and（max-width：600px）{
/ *具有宽度为600px或更小屏幕的所有设备的样式。* /
}
@media screen and（max-width：992px）{
/ *所有屏幕的最大宽度为992px或更低* /
}
@media screen and（min-width：992px）{
/ *所有宽度为992px或更高的屏幕* /
}