Использование медиа-запросов

Я пытаюсь создать медиа-запрос, который отображает изображение, если разрешение вашего экрана находится в пределах определенного размера, и я не могу заставить его работать. Я использую следующее:

<style>
@meida (min-width: 701px) and (max-width: 5000px) {
<div="sixteen columns" align="center">
<div class="home-boxes"><img src="http://www.ursovain.com/wp-content/uploads/boxes-3.jpg">   
</div>
}
</style>

css media
person Chris English    schedule 03.09.2014    source источник
comment
Добро пожаловать! @meida должно быть @media. И вам не следует встраивать html-элементы в стиль, хотя они на самом деле не являются html-элементами в том виде, в каком вы их написали. По сути, я думаю, вам нужно прочитать документацию или учебник по HTML и CSS в целом, потому что этот фрагмент кода довольно запутанный.   -  person GolezTrol    schedule 03.09.2014
comment
Вы ищете Javascript, а не CSS.   -  person Mike    schedule 03.09.2014
comment
Решение на основе javascript будет использовать Matchmedia, developer.mozilla.org/ en-US/docs/Web/API/Window.matchMedia   -  person Pablo Rincon    schedule 03.09.2014

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно указать его, как в моем примере ниже. HTML и CSS разделены.

<style>
@media (max-width: 600px) {
  .home-boxes {
    display: none;
  }
}
</style>

HTML

<div class="home-boxes">
    <img src="http://www.ursovain.com/wp-content/uploads/boxes-3.jpg" />
</div>

В моем примере выше медиа-запрос применит CSS внутри него, когда будет выполнено условие экрана. В этом случае CSS, который будет применяться, будет display: none ко всем элементам с классом home-boxes.

person Kevin Lynch    schedule 03.09.2014