css - 无法使媒体查询工作

Question

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

直播链接在这里 http://soloveich.com/pr4/

代码是这样的

<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;
  }
}

我做错了什么？

Answer 1

您正在使用 .sptxt 而不是 #sptxt

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