Я пытаюсь создать медиа-запрос, который отображает изображение, если разрешение экрана составляет определенный размер, и я не могу заставить его работать. Я использую следующее:Использование медиа-запросов
<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>
Необходимо указать его, как в моем примере ниже. 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
Добро пожаловать! '@ meida' должен быть' @ media'. И вы не должны вставлять элементы html внутри стиля, хотя они не являются * действительно * html-элементами, как вы их написали. В принципе, мне кажется, вам нужно читать документацию или учебник по HTML и CSS в целом, потому что этот фрагмент кода довольно запутан. – GolezTrol
Вы ищете Javascript, а не CSS. – Mike
Решение javascript будет использовать Matchmedia, https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia –