Html 多元素的媒体查询

新媒体查询。但我想我在什么地方错过了船

假设我有一个像下面snippit中的一样的顶栏，由一个顶栏容器、固定宽度和一个列表组成，整个单元浮动到右侧。我希望它，只要屏幕的大小，直到，让我们说1000px，为顶栏收缩随着屏幕的大小，因为它是调整。当它达到1000px时，会发生其他事情，但我们可以稍后再担心

要使其工作，我需要为topBar容器和topBar固定宽度设置查询，还是仅为容器设置查询？另外，对于整个屏幕，我应该针对的是最大宽度还是最小宽度

顶部菜单 { 宽度：100%； 背景色：白色； 高度：40px； 颜色：00a5b5 } 顶部菜单固定宽度 { 高度：80px； 宽度：1156px； 颜色：00a5b5； 保证金：0自动； } 顶部菜单固定宽度ul { 列表样式：无； 浮动：对； 右边距：5px； } 顶部菜单固定宽度ul:nth-child4 { 右边距：0； } 顶部菜单固定宽度ul li { 浮动：左； 利润率：10px； 合作伙伴 事业 语言 登录

---

您拥有适用于所有屏幕大小的基本css。除此之外，您只需设置在屏幕大小更改时要更改的css类。例如，如果您希望删除1000px以下的浮点值，您可以执行以下操作：

#topbar {float: right;}
@media screen and (max-width: 1000px) {
    #topbar {float: none;}
}

---

由于您希望内容随着屏幕大小的调整而重新调整大小，因此应该使用长度，例如vh和vw。元素的大小将相对于视口进行调整

另外，对于整个屏幕，我应该针对的是最大宽度还是最小宽度

也没关系，除非你有特殊需要

@media ( min-width: 1000px ) {
    /* executes code here when the screen is 1000px or more */   
}

@media ( max-width: 1000px ) {
    /* executes code here when the screen is 1000px or less */   
}

更多信息：

---

顶部菜单的宽度已为100%，因此无论发生什么情况，都将调整其大小。顶部菜单的fixedWidth必须位于媒体查询中，如下所示：

@media screen and (min-width 1000px){
    #topMenu-fixedWidth
    {
        height: 80px;
        width: 1156px;
    }
}

---

*注意：你只需要在媒体查询中包含你想要更改的样式。

在对你的问题进行进一步研究时，我发现了一篇文章，其中有一些非常好的答案。我想你会发现它们很有用。我用链接引用更新了我的答案。我还发布了一个链接，指向我去年写的一个相关答案。