Блог

Главная - Вопросы по программированию - Настройка высоты iframe с помощью медиа-запросов

Настройка высоты iframe с помощью медиа-запросов

#html #css #iframe

#HTML #css #iframe

Вопрос:

Я пытаюсь, чтобы эта вставка загружала iframe размером 200 пикселей, а для мобильных экранов загружала высоту 140 пикселей.

 <!DOCTYPE html>
<html>
<style type="text/css">
  @media only screen and (max-device-width: 480px) {
      .iframe {
        height:140px;
      }
  }
</style>

  <body style="margin:0px">

  <iframe width="100%" height="200" src="https://www.youtube.com/embed/FtveSk1N7Uo?enablejsapi=1amp;origin=http://domain.comamp;autoplay=1" frameborder="0" allowfullscreen></iframe>

  </body>
</html>

Однако это не работает

Ответ №1:

Это не работает, потому что встроенные стили ( height="200" в iframe) имеют приоритет над любыми другими стилями. Кроме того, ваш селектор не будет соответствовать вашей разметке — он должен быть iframe (элементом), а не .iframe (классом).

Попробуйте height=200 отключить iframe и поместить его перед вашим медиа-запросом в ваших стилях:

 iframe {
  height: 200px;
}

@media only screen and (max-device-width: 480px) {
  iframe {
    height:140px;
  }

}

Кстати, обычно лучше использовать max-width вместо max-device-width . Первый применит ваши небольшие стили к небольшому окну браузера ноутбука или настольного компьютера; последний этого не сделает.

Ответ №2:

ДЕМОНСТРАЦИЯ:

http://plnkr.co/edit/GcaMYbu1lEBJqL1OQnL2?p=preview

Это должен быть iframe not .iframe. ‘.’ — это селектор для классов, а iframe здесь не класс, а html-элемент, и поэтому его следует указывать только с именем элемента.

   @media only screen and (max-device-width: 480px) {
      iframe {
        height:140px;
      }
  }