Question

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

假设我有一个topBar，就像下面snippit中的那个，由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。元素将相对于视口大小。

此外，我应该针对整个屏幕定位最大宽度还是最小宽度？

要么。除非你有特殊需要，否则不重要。

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

更多信息：

Answer 2

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

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

Answer 3

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

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

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

多个元素的媒体查询

3 个答案: