Не удается получить медиа-запрос для работы - PullRequest
Новая
       2

Не удается получить медиа-запрос для работы

0 голосов
/ 24 января 2020

Я не могу заставить пару запросов @media работать. Пробовал несколько кусков кода безрезультатно. Я пытаюсь расположить аудиоплеер на всех устройствах, однако по какой-то неизвестной мне причине плеер не будет перемещаться по медиазапросу. Если вы go до 24hournews.news на настольном компьютере или ноутбуке, вы увидите проблему. Игрок далеко вправо, и не должно быть. Код для платформы телефона работает нормально. Вот соответствующий код: 

img {
display: block;
max-width: 100%;
height: auto;
    }

/* top right */
.top-right {
position: absolute;
top: 170px;        
left: 190px;
    } 

/* top phone */
.top-phone {
 position: absolute;
 top: 275px;
 right: 35px;        
    }

@media only screen and (min-width: 992px) {
<div class="top-right">
<script src="https://embed.radio.co/player/056cfb4.js"></script>
</div>
}

@media only screen and (min-width: 1200px) {
<div class="top-right">
<script src="https://embed.radio.co/player/056cfb4.js"></script>
</div>
}

</style>
</head>
<body> 
<img src="24logo.jpg"> 
<div class="top-phone">
<script src="https://embed.radio.co/player/056cfb4.js"></script>
</div>

Ответы [ 3 ]

0 голосов
/ 24 января 2020

В медиазапрос можно ставить только CSS, а не HTML. Что вы хотите сделать, это показать один фрагмент HTML для одного медиа-запроса и другой фрагмент для другого.

Для этого вам нужно будет дать каждому фрагменту свой id и затем контролировать их display свойство в медиа-запросе. Код ниже делает то, что вы хотите: 

img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* top right */

.top-right {
  position: absolute;
  top: 170px;
  left: 190px;
}


/* top phone */

.top-phone {
  position: absolute;
  top: 275px;
  right: 35px;
}

@media only screen and (min-width: 992px) {
  #query1 {
    display: none;
  }
}

@media only screen and (min-width: 1200px) {
  #query2 {
    display: none;
  }
}
<body>

  <div class="top-right" id="query1">
    <script src="https://embed.radio.co/player/056cfb4.js"></script>
  </div>

  <div class="top-right" id="query2">
    <script src="https://embed.radio.co/player/056cfb4.js"></script>
  </div>


  <img src="24logo.jpg">
  <div class="top-phone">
    <script src="https://embed.radio.co/player/056cfb4.js"></script>
  </div>

</body>

Обратите внимание, что в дополнение к уже описанным изменениям я удалил неуместный тег </head>, а также исправил body так что он оборачивается вокруг других элементов.

0 голосов
/ 24 января 2020

Используя ваш код, вам нужно указать класс элемента HTML в запросе media: 

img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* top right */

.top-right {
  position: absolute;
  top: 170px;
  left: 190px;
}


/* top phone */

.top-phone {
  position: absolute;
  top: 275px;
  right: 35px;
}

@media only screen and (min-width: 992px) {
  .top-right {
    position: absolute;
    top: 20px; /* CHANGE THIS VALUE */
    left: 190px; /* CHANGE THIS VALUE */
  }
}

@media only screen and (min-width: 1200px) {
  .top-right {
    position: absolute;
    top: 40px; /* CHANGE THIS VALUE */
    left: 190px; /* CHANGE THIS VALUE */
  }
}
<img src="24logo.jpg">
<div class="top-phone">
  <div class="top-right">
    <script src="https://embed.radio.co/player/056cfb4.js"></script>
  </div>
</div>
0 голосов
/ 24 января 2020

Изменение css свойств в медиазапросах, а не html элементов. 


@media only screen and (min-width: 992px) {
img {
//styles
    }

/* top right */
.top-right {
//styles
    } 


}

@media only screen and (min-width: 1200px) {
img {
//styles
    }

/* top right */
.top-right {
//styles
    } 

}
...