Запросы на средства массовой информации работают только частично

Question

В основном я играю с ними, и я заметил, что некоторые свойства меняются, как я хочу. Некоторые (текстовое преобразование и размер шрифта) не имеют эффекта (они работают вне медиа-запроса, но не в). p и #icon часть работает безупречно, а также цвет и семейство шрифтов для .title, поэтому у меня нет понятия о том, почему это происходит.

Соответствующие фрагменты кода:

@media only screen and (max-width: 1000px) { 
    p { 
     background-color: blue; 
    } 

    #icon { 
     display: none; 
    } 

    .title { 
     color: red; 
     text-transform: lowercase; 
     font-family: Arial; 
     font-size: 10px; 
    } 

} 

А для обычного размера экрана у меня есть

.title { 
    text-transform: uppercase; 
    font-size: 35px; 
    font-weight: 300; 
} 

И в HTML части

<h1 class="title" style="text-align: right; margin-bottom: 0px;">Jane Doette</h1> 

Answer 1

Мое предположение заключается в том, что ваш медиа-запрос помещается перед типом не-мультимедийных запросов. Если это так, поставить медиа-запрос после того, как: JS Fiddle - Media Query Last

.title { 
    text-transform: uppercase; 
    font-size: 35px; 
    font-weight: 300; 
} 
@media only screen and (max-width: 500px) { 
    p { 
     background-color: blue; 
    } 
    #icon { 
     display: none; 
    } 
    .title { 
     color: red; 
     text-transform: lowercase; 
     font-family: Arial; 
     font-size: 10px; 
    } 
} 

В противном случае, если запрос СМИ первым, последние стили в таблице стилей будет принимать прецедент: JS Fiddle - Media Query First

Answer 2

Для правил, где селекторы одинаково конкретные , последний имеет приоритет.

Сделайте правило внутри мультимедийного запроса более конкретным, например, изменив .title на h1.title или разместите правила для обычного размера экрана перед запросом на медиа.