html - 多个元素的媒体查询

Question

媒体查询的新手。但我想我错过了某个地方。

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

为此，我需要为 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>

Answer 1

由于您希望内容随屏幕大小一起调整大小，因此您应该使用 viewport percentage长度，例如 vh 和 vw。元素将根据视口(viewport)调整大小。

Also, is it a Max width or a min width that I should be targeting for the overall screen?

要么。没关系，除非您有特殊需要。

@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 */   
}

更多信息:

• > Max-Width vs. Min-Width
• > Common breakpoints for media queries on a responsive site