текстовые ответы на запросы СМИ не работают

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 - размеры шрифта увеличен/кв.м. (макс-ширина) 'ы уменьшились, например

Кроме того, 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%; 
    } 
}