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（最大宽度）＆＃39; 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%;
    }
}

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

1 个答案: