Медиа-запросы не работают вообще

Question

Я в отчаянии. Я пытаюсь создать веб-сайт и сделать его мобильным и отзывчивым, однако, похоже, я не могу заставить какой-либо медиа-запрос работать вообще! Все мои размеры, ширина и высота находятся в «%/em», а мои размеры шрифта находятся в «vw/em». Самая большая проблема, которую я получаю, состоит в том, что, когда экран сжимается, мой текст тоже доходит до того, что он просто становится напряженным для чтения! Я не вижу необходимости отправлять какой-либо код, но в случае необходимости я отправлю часть своего кода (мой веб-сайт по-прежнему отключен, и я не могу его отключить, если эта проблема не устранена).

Вот что я пробовал:

Я попытался положить это в моем теге:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Нет успеха при попытке медиа-запрос на вкладке или в отдельном CSS стилей.

Я попытался удалить его также.

Я пробовал эти медиазапросы моих размеры шрифта:

@media (max-width: 400px) { 
    body { font-size: 60%;} 
} 

@media only screen and (max-device-width: 800px) { 
    body { 
     font-size: 80%; 
     background-color: blue; 
    } 

} 

@media (max-width: 1100px) { 
    body { font-size: 120%;} 
} 

Я также пробовал другие запросы средств массовой информации, но абсолютно ничего не меняется вообще! Я делаю что-то неправильно? Наверное, но что? !! Это приводит к множеству проблем! Я не могу изменить свой заголовок в соответствии с разными размерами экрана, я не могу изменить свой экран, мои заголовки ссылок беспорядочны и т. Д.

Также обратите внимание, что я новичок, и я не использую javascript, bootstrap и т. Д. ,

Заранее благодарю вас за помощь!

Answer 1

Ваши запросы немного странно. Возможно, с некоторыми логическими ограничениями вы можете добиться того, что ищете? Это то, что я имею в виду:

@media (max-width: 400px) { 
    body{ 
     background-color: yellow; 
    } 
} 

@media (min-width: 401px) and (max-width: 800px){ 
    body { 
     background-color: blue; 
    } 
} 

@media (min-width: 801px) and (max-width: 1100px) { 
    body { 
     background-color: purple; 
    } 
} 

@media (min-width: 1101px){ 
    body{ 
     background-color: orange; 
    } 
} 

По моему скромному мнению, установка интервалов с использованием как min-width и max-width помочь мне визуализировать то, что происходит лучше. В этом pen цвета изменяются при каждом изменении ширины. Это не очень хорошо, но начать с медиа-запросов.

EDIT:

Pen содержит переходы между цветами, потому что прохладный

Answer 2

Как правило, лучше использовать медиа-запросы на основе минимальной ширины экрана. Вот рабочий пример с кодом вы публикуемую:

Codepen: http://codepen.io/anon/pen/eNJXXp

@media (max-width: 400px) { 
    p { font-size: 60%;} 
} 

@media (min-width: 400px) { 
    p { 
     font-size: 80%; 
     background-color: blue; 
    } 

} 

@media (min-width: 800px) { 
    p { font-size: 120%;} 
}