html - 文本响应媒体查询不起作用

所以，我试着让我的文本对屏幕大小的变化做出响应。我已经玩了一段时间这个媒体查询，改变了数字，百分比和类，似乎没有什么变化。如果我在媒体查询中更改了任何内容，则不会发生任何事情，但如果我更改了class.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来达到同样的效果，但是，这似乎对我也不起作用。这是我在标题中输入的代码：

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

最佳答案

因为最初的样式是基于类名的，所以应该使用media-queries中的类名，而不是p标记：
JS Fiddle-
字体大小增加/mq（最大宽度）减少，例如
另外，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%;
    }
}