экран @media не работает, что не так? - PullRequest
Новая
       2

экран @media не работает, что не так?

0 голосов
/ 21 апреля 2020

У меня есть следующий код, который я получаю из учебника. Когда я запускаю Chrome или Firefox, все две строки отображаются независимо от того, изменяю ли я размер окна или нет. Что я делаю не так? 

<html>
<head>
    <style>

#content-desktop {display: block;}
#content-mobile {display: none;}

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

#content-desktop {display: none;}
#content-mobile {display: block;}

</style>

<meta charset="UTF-8">
<title>Untitled Document</title>
</head>


<div class="content-desktop">
This is the content that will display on DESKTOPS.
</div>

<div class="content-mobile">
This is the content that will display on MOBILE DEVICES.
</div>
<body>
</body>
</html>

Ответы [ 3 ]

1 голос
/ 21 апреля 2020

Во-первых, вы используете class="content-desktop" и class="content-mobile", а ваш CSS ожидает id, потому что вы использовали #content-desktop и #content-mobile.

Во-вторых, вы забыли закрыть свой скобка.

В CSS необходимо использовать точку . для выбора class и # для выбора id.

Попробуйте это: 

.content-desktop {display: block;}
.content-mobile {display: none;}

@media screen and (max-width: 768px) {
   .content-desktop {display: none;}
   .content-mobile {display: block;}
}
0 голосов
/ 21 апреля 2020

Вы никогда не закрывали скобки, вы используете # для целевого класса, который вам нужно использовать. Кроме того, вы div были вне тега тела. Более того, в этом случае вам также потребуется запрос на вышеуказанное масштабирование. следующий код проверен. Вы можете запустить его напрямую. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.desktop {
  background-color: yellow;
  padding: 20px;
}

@media screen and (max-width: 600px) {
  .desktop {
    display: none;
  }
  .mobile{
      background-color: red;
  padding: 20px;
}
}
@media screen and (min-width: 600px){
    .mobile{
        display: none;
    }
}
</style>
</head>
<body>

<h2>Hide elements on different screen sizes</h2>

<div class="desktop">Show on desktop but hide on mobile.</div>
<div class="mobile">Show on Mobile but hide on desktop</div>


</body>
</html>
0 голосов
/ 21 апреля 2020

Вы никогда не закрываете открытую здесь скобку: 

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

Следовательно, все правило @media отбрасывается синтаксическим анализатором. Просто закройте его там, где он должен быть закрыт (вероятно, до </style>).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...