HTML/CSS Отзывчивый текст

Question

Я работаю над своим первым отзывчивым сайтом. Я читал об этом и хорошо разбираюсь в этом. Одна из проблем, с которыми я столкнулся, - с текстовыми или h1-6 заголовками. Например, у меня есть кнопка, которую я хочу изменить при изменении размера моего браузера. Кнопка находится под классом. Также в этом css-файле у меня есть только экран @media и (min-width: 320px) {... Внутри скобки я назвал тот же класс, а для ширины - max-width: 50%. Это работает отлично. Проблема, с которой я столкнулась, заключается в том, что если я снова использую элемент, он заменяет его на всю страницу, даже если я просматриваю его на весь экран.

То, что я пытаюсь сказать, например, у меня есть класс под названием «keep-button» внутри css. Я имею его как размер шрифта: 25 пикселей. Теперь, когда я перехожу к экрану @media и (min-width: 320px) {и изменяю размер шрифта до 15 пикселей. Вместо того, чтобы изменять размер шрифта до 15 пикселей только на экране 320 пикселей, он делает это для всей страницы. Я пробовал использовать font-size-adjust, но это не сработало.

Вот пример кода из него:

.keep-button { 
    height: 70px; 
    width: 430px; 
    background-color: #C60; 
    margin: auto; 
    margin-top: 115px; 
} 

h5 { 
    font-size: 25px; 
    color: #FFFFFF; 
    text-align: center; 
    padding: 20px 0; 
} 


@media only screen and (min-width : 320px) { 

.keep-button { 
    max-width: 50%; 

} 

h5 { 
    font-size: 15px; 
    font-size-adjust: .50; 
} 


} 

Answer 1

Я думаю, что нужно изменить, чтобы @media only screen and (min-width : 320px) @media only screen and (max-width : 320px). Теперь, когда страница будет меньше 320 пикселей, ваши правила будут применены. Кроме того, попробуйте разобраться в статье о медиа-запросах this.