Question

已编辑添加，因此没有其他人发布此答案：我的代码中已经有一个视口标记。

我在这里已经阅读了许多类似问题的回答，我确定我的问题可能存在于我的查询声明的顺序中，但我不能为我的生活做好准备。在哪里。

我有两个div，一个应该以宽布局显示，另一个应该以窄布局显示。

<!-- for small layouts -->
<div class="container-fluid slogan text-center" id="home-slogan-container-small">
   small
</div>

<!-- for 800 px and wider -->
<div class="container-fluid slogan text-center" id="home-slogan-container-large">
   large
</div>

（这些非常精简;实际内容在div中有不同的布局。）

我遇到的问题是，无论我将浏览器扩展到什么尺寸（使用ctrl-shift-m在FF中测试以获取移动视图，在使用开发工具中的移动视图按钮在Chrome中测试）），小布局显示。

这是我的css：

#home-slogan-container-small {
    padding-top: 15px;
    text-align: center !important;
    display: none;
}

#home-slogan-container-large {
    padding-top: 15px;
    text-align: center !important;
    display: none;
}


@media only screen and (max-width: 1500px) {
        #home-slogan-container-small { display: none !important;}
        #home-slogan-container-large { display: block !important;}
}

@media only screen and (max-width: 1200px) {
    #home-slogan-container-small { display: none !important;}
    #home-slogan-container-large { display: block !important;}
}


@media only screen and (max-width: 960px) {
    #home-slogan-container-small { display: none !important;}
    #home-slogan-container-large { display: block !important;}
}

@media only screen and (max-width: 800px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}


@media only screen and (max-width: 799px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}

@media only screen and (max-width: 420px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}

@media only screen and (min-width: 300px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}

我是一名PHP / mySQL开发人员，他有一个引导网站放在我身上; CSS不是我的强项。任何解释都将不胜感激。

Answer 1

以下是问题

@media only screen and (min-width: 300px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}

min-width ...意味着任何宽度大于此值的内容（例如所有浏览器）都会将这些属性设置为true。将其更改为最大宽度，你会没事的。

编辑：以下所有内容均属实，但不是@EmmyS问题的原因。解决方案就在上面。

我最近在Foundation上遇到过这个问题，我怀疑bootstrap也存在这个问题。您的HTML 可能缺少元声明：

<meta name="viewport" content="width=device-width, initial-scale=1">

将其添加到HTML的头部，它可能会正常工作。你遇到这个问题的原因是因为移动浏览器决定“好吧，我不知道如何显示这个网站，所以我要把它扩展为好像我是一个大型浏览器，即使我是不“。

Answer 2

您必须删除最后一个媒体查询

@media only screen and (min-width: 300px) {
   #home-slogan-container-small { display: block !important;}
   #home-slogan-container-large { display: none !important;}
}

原因是，这最后一个是最小宽度规则并且否定之前的所有规则（除了在wieport＆lt; 300px的情况下）

Answer 3

重写所有样式：

/* Styles for size 0px - 799px */
.small {
  display: block;
}

.middle {
  display: none;
}

.large {
  display: none;
}

/* Styles for size 800px - 1200px */
@media (min-width: 800px) {
  .small {
    display: none;
  }

  .middle {
    display: block;
  }

  .large {
    display: none;
  }
}


/* Styles for size 1200px and more */
@media (min-width: 1200px) {
  .small {
    display: none;
  }

  .middle {
    display: none;
  }

  .large {
    display: block;
  }
}

我选择800px和1200px作为断点。您可以修改它们或添加新的。

为什么我的媒体查询无法应用？

3 个答案: