Похоже, что медиазапросы не работают

Я'пытаюсь добавить медиа-запрос к моей странице, но, похоже, он не работает.

Я все еще новичок и пока не совсем понимаю, как работают медиа-запросы.

Вот код для медиа-запроса:

@media screen (max-width:320px){h1{font-size:0.75em;}h1{font- 
size:0.8em;}p{font-size:0.8em;}figcaption{font-size:0.8em;}.img-style{max- 
width:45px;max-height:45px;}#profile-link{max-width:55px;max- 
height:55px;}#navbar{text-align:center;}}

Вот кодепен: https://codepen.io/don0ts/pen/JByjqO

Программирование
grid css3 media html css
25-го июля 2018 в 11:17
21 просмотров
Решение

Попробуйте написать так: "@media only screen and" вместо "@media screen"

Комментарии (1)

Вы можете использовать этот код, просто удалите "screen" из "@media screen".

    @media (max-width:320px){
      h1{
        font-size:0.75em;
      }
      h1{
        font-size:0.8em;
      }
      p{
        font-size:0.8em;
      }
      figcaption{
        font-size:0.8em;
      }
      .img-style{
        max-width:45px;max-height:45px;
      }
      #profile-link{
        max-width:55px;max-height:55px;
      }
      #navbar{
        text-align:center;
      }
  }

Или вы можете изменить на "@media only screen and (max-width:320px)".

Комментарии (0)

Вы пропустили слово "и".

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

  //styles go here

}
Комментарии (2)