无法使媒体查询工作答案

【问题标题】：Can't make media queries work无法使媒体查询工作
【发布时间】：2014-01-24 16:59:11
【问题描述】：

我正在构建一个响应式 wordpress 主题并尝试根据屏幕宽度设置大小更改字体。有人建议使用 jquery，但我也决定尝试 css 媒体查询。字体大小仍然没有改变，整个文本在标题背景下滑动。

代码如下所示

<div class="container-full" id="spbg">
    <div class="row">
        <div class="col-lg-5"><div class="visible-md visible-lg" id="gr"></div>
        <div class="visible-sm visible-xs" id="grsm"></div>
    </div>
    <div class="col-lg-7">
        <div class="visible-sm visible-md visible-lg sptxt" id="sptxt">
            <?php
                $post_id = 127;
                $queried_post = get_post($post_id);
                echo $queried_post->post_content;
            ?>
        </div>
    </div>
</div>

和css

#spbg {
  margin-top: 100px;
  color: white !important;
  background-image: url(http://soloveich.com/pr4/wp-content/themes/blain/images/spbg.png);
 background-repeat: repeat-x;
}
#sptxt {
  padding-right:20px;
  padding-top: 20px;
  color: #fff;
  font-family: tahoma;
  font-weight: bold;
  line-height: 70px;
}
#gr {
  width: 417px;
  height: 283px;
  margin-left: 30px;
  margin-top: -60px;
  background-image: url(http://soloveich.com/pr4/wp-content/themes/blain/images/gr.png);
 background-repeat: no-repeat;
}
#splmd {
  color: #fff;
  font-family: tahoma;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .sptxt {
      font-size:10px;
  }
}
@media screen and (min-width: 1124px) {
  .sptxt {
    font-size:29px;
  }
}

我做错了什么？

【问题讨论】：

由于名声很小，无法回答我的问题，所以在这里发表评论。愚蠢的我:(因为大柱子而滑动。把它们做得很小，一切都很好。该死，我觉得很愚蠢......

标签： css twitter-bootstrap media-queries

【解决方案1】：

您使用的是.sptxt 而不是#sptxt

@media screen and (max-width: 1024px) {
    #sptxt {
font-size:10px;
}
}
@media screen and (min-width: 1124px) {
    #sptxt {
font-size:29px;
}
}

【讨论】：

我做到了。没用。我尝试设置#sptxt 默认字体大小10px，然后@media screen and (min-width: 1124px) { #sptxt { font-size:29px; } } 效果不佳
尝试 #spbg #sptxt { 字体大小：

【解决方案2】：

您必须在媒体查询中使用 ID (#sptxt) 而不是类 (.sptxt)

#sptxt {
font-size:10px;
}

【讨论】：

【解决方案3】：

我的浏览器似乎没有任何问题（我使用的是 Windows 8.1 上的最新 Chrome）。我会发布一张照片，但我还没有这方面的声誉。

对于那些说他需要使用 ID 而不是类的其他人 - 为什么？他包括类 sptxt 以及 ID，所以任何一个都可以正常工作。

【讨论】：

我的错。我发的不是很清楚。一旦我得到大约 1024 或更小的宽度，文本就会向下滑动，因为最初的默认字体大小是 29，它太大而无法保持原位。
啊。那么在这种情况下，问题似乎是文本是白底白字，一旦你达到 991 像素，你实际上是在使用不同的 HTML 片段来显示 相同的 内容（我不完全明白为什么会这样，但可能有一个很好的理由让我错过了）。编辑：没关系，没看到你已经找到它了：P

【解决方案4】：

它正在工作：- 由于白色，文本消失了。

@media screen and (max-width: 1024px) {
    #sptxt {
font-size:10px;
color: #000;
}
}
@media screen and (min-width: 1124px) {
    #sptxt {
font-size:29px;
}
}

【讨论】：

【解决方案5】：

它对我有用 .. 试试 Firefox 开发者工具“响应式设计视图”。它从 main.css 第 69 行的#sptxt 类中获取 10px 字体大小

也在 Chrome 30+ 上测试过

【讨论】：