多个元素的媒体查询答案

【问题标题】：Media Queries for Multiple Elements多个元素的媒体查询
【发布时间】：2017-01-18 02:22:42
【问题描述】：

媒体查询新手。但我想我在某个地方错过了这条船。

假设我有一个类似于下面代码片段中的 topBar，由一个 topBar 容器、固定宽度和一个列表组成，并且整个单元向右浮动。我希望它只要调整屏幕大小直到，比如说 1000px，topBar 在调整大小时与屏幕一起缩小。当它达到 1000 像素时，会发生其他事情，但我们可以稍后再担心。

为此，我需要为 topBar 容器和 topBar 固定宽度设置查询，还是只为容器设置查询？另外，我应该针对整个屏幕定位最大宽度还是最小宽度？

#top-menu
{
    width: 100%;
    background-color: white;
    height: 40px;
    color: #00a5b5
}

#topMenu-fixedWidth
{
    height: 80px;
    width: 1156px;
    color: #00a5b5;
    margin: 0 auto;
}

#topMenu-fixedWidth ul
{
    list-style: none;
    float: right;
    margin-right: 5px;
}

#topMenu-fixedWidth ul:nth-child(4)
{
    margin-right: 0;
}

#topMenu-fixedWidth ul li
{
    float: left;
    margin: 10px;

      <div id="top-menu">
            <div id="topMenu-fixedWidth">
                <ul>
                    <li class="topMenuText">Partners</li>
                    <li class="topMenuText">Careers</li>
                    <li class="topMenuText">Language</li>
                    <li class="topMenuText">Login</li>
                </ul>
            </div>
        </div>

【问题讨论】：

在对您的问题进行更多研究时，我发现了一篇包含一些非常好的答案的帖子。我想你会发现它们很有用。我用链接参考更新了我的答案。我还发布了一个链接，指向我去年写的一个相关答案。

标签： html css media-queries

【解决方案1】：

由于您希望内容与屏幕大小一起调整大小，因此您应该使用viewport percentage 长度，例如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 */   
}

更多信息：

【讨论】：

【解决方案2】：

您拥有适用于所有屏幕尺寸的基本 CSS。然后除此之外，您只需设置屏幕尺寸更改时想要更改的任何 css 类。例如，如果您想删除低于 1000px 的浮动，您可以执行以下操作：

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

【讨论】：

【解决方案3】：

您的#top-menu 已经有 100% 的宽度，因此无论如何都会调整大小。您的#topMenu-fixedWidth 需要在媒体查询中，如下所示：

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

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

【讨论】：