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

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 以达到相同的结果，但是这似乎对我也不起作用。这是我放在标题中的代码：

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

Answer 1

因为您最初根据类名设置它们的样式，所以您应该使用media-queries 中的类名而不是p 标记：

JS Fiddle - 例如字体大小增加/mq(max-width) 减少

此外，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%;
    }
}