文本响应媒体查询不工作

Question

所以，我试图让我的文本响应屏幕大小的变化。我一直在玩这个媒体查询一段时间了，改变了数字，百分比和类别，似乎没有什么改变。如果我在媒体查询中改变任何东西都不会发生任何事情，但是如果我改变类的字体大小。intro工作。所以，我知道这和媒体的询问有关。我基本上只是希望。intro类和。text-left类在屏幕变小时缩小10个点。

HTML:

<p class="intro">About </p>
<p class="text-left">Hello! Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
</p>

CSS:

@media only screen and (max-width:800px) {
p {font-size:100%;}
}
@media only screen and (max-width:1100px) {
p {font-size:120%;}
}
.intro {
font-size: 36px;
font-family: microsoft sans-serif;
color: #67523F;
padding: 30px 70px 0px 70px;
}
.text-left { 
font-size: 100%;
font-family: microsoft sans-serif;
color: #67523F;
padding: 0px 70px 100px 70px;
}

我也尝试过textfit来达到同样的结果，但是，这似乎也不适合我。下面是我在header中添加的代码:

<script type="text/javascript">
$.fn.ready(function () {
$("p").fittext(2, {'minFontSize':12,'maxFontSize':50 });
});
</script>

Answer 1

因为您最初是基于它们的类名对它们进行样式设置的，所以您应该使用media-queries中的类名而不是p标签中的类名:

JS提琴-字体大小增加/mq(max-width)'s减少例如

另外，media-query样式应该出现在非查询样式之后，这样它们就不会被覆盖:

.intro {
    font-size: 36px;
    font-family: microsoft sans-serif;
    color: #67523F;
    padding: 30px 70px 0px 70px;
}
.text-left {
    font-size: 100%;
    font-family: microsoft sans-serif;
    color: #67523F;
    padding: 0px 70px 100px 70px;
}
@media only screen and (max-width:800px) {
    .intro, .text-left {
        font-size:100%;
    }
}
@media only screen and (max-width:1100px) {
    .intro, .text-left {
        font-size:120%;
    }
}