Question

我正在构建一个响应式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;
  }
}

我做错了什么？

Answer 1

您使用.sptxt代替#sptxt

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

Answer 2

您必须在媒体查询中使用ID（#sptxt）而非类（.sptxt）

#sptxt {
font-size:10px;
}

Answer 3

我的浏览器看起来没有任何问题（我使用的是Windows 8.1上的最新版Chrome）。我发布了一张图片，但我还没有这个名声。

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

Answer 4

它的工作原理： - 由于白色，文字消失了。

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

Answer 5

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

在Chrome 30+上测试

无法进行媒体查询

5 个答案: