Что не так с этими запросами CSS Media? - или со мной. Должно быть, виноват кто-то из нас двоих
Итак, насколько я могу судить, мой код ~должен~ работать. но это не так. Инструменты разработчика Chrome показывают, что мой браузер распознает условие> 501 пикселей и применяет CSS, но не условие меньшего размера области просмотра. Я подумал, что, может быть, это странная штука с кешем браузера, но нет... это происходит с упрощенной страницей, созданной для демонстрации проблемы, и в Safari тоже.
Итак, после двух дней создания веб-сайтов и одержания на этом пути стольких более сложных побед, я зашел в тупик в этой, казалось бы, простой, а не простой вещи.
Может ли кто-нибудь избавить меня от страданий и сказать, почему это не освобождает элемент div, когда браузер становится тонким?
изображение, показывающее проблему при использовании Chrome
<html>
<head>
<style>
#aboutblock {
width:90%;
margin: 5% auto;
text-align:justify;
}
@media all and (min-width: 501px) {
#aboutblock img {
float:left;
width:400px;
margin:1%;
margin: 0% 3% 2% 0%;
}
}
@media all and (max-width: 500px) {
#aboutblock img {
float:none;
width:277px;
margin:1%;
margin: 0% 3% 2% 0%;
}
}
</style>
</head>
</body>
<div class = "blockcontainer">
<div id = "aboutblock">
<img src = "https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJvd2xfbmlnaHRfb3dsX2FuaW1hbC1pbWFnZS1reWJjeWVqaS5qcGc.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien odio, sollicitudin a dolor at, sodales etc etc etc...</p>
<p>Suspendisse potenti. Donec molestie aliquam lacus at laoreet. Donec justo risus, euismod quis augue a, etc etc etc...</p>
<p>Sed efficitur rhoncus tristique. Sed vulputate, velit quis auctor convallis, erat lacus tincidunt sem, etc etc etc... </p>
</div>
</div>
<body>
</html>
А что касается «как», «почему» и «что я сделал?»... Я строил сайт, переутомился и теперь не могу найти даже способа решить эту, казалось бы, маленькую вещь, которая, безусловно, мой сигнал наконец-то поспать. ... но кроме того, я сейчас слишком взволнован этим!
Я сделал небольшую, очищенную версию соответствующей части веб-сайта, который создавал, чтобы убедиться, что проблема не связана с каким-либо конфликтом или чем-то в этом роде. Я не был.
Тестовый пример здесь. https://generous-tiger.static.domains/testpage
Честно говоря, я надеюсь, что упускаю здесь что-то очевидное, просто в надежде, что кто-нибудь сможет избавить меня от страданий!
Интересный! Спасибо, что хотя бы заглянули. Когда я смотрю на Chrome и Safari с этой стороны, изображение здесь определенно не исчезает. Я попробую отредактировать и добавить изображение в сообщение.
У меня это тоже работает в Chrome 123.0.6312.86 и Firefox 124.0.1. Вы пытались очистить кеш браузера?
Ах, вы используете вид мобильного устройства. На странице отсутствует метатег области просмотра, поэтому медиа-запросы не работают так, как вы ожидаете.
Ну, я буду... что-нибудь! Сегодня я усвоил ценный урок и никогда больше не забуду метатег области просмотра. Я надеюсь! Я добавил вкладку, и, как по волшебству, оказалось, что я не смог найти проблему в самом простом фрагменте кода, потому что его не было. Спасибо всем, особенно Гаю Инкогнито. Теперь я наконец могу спать.
Ответы 1
Как было предложено в комментариях, он работает должным образом после добавления метатега области просмотра, включая просмотр на мобильных устройствах:
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1" />
<style>
#aboutblock {
width:90%;
margin: 5% auto;
text-align:justify;
}
@media all and (min-width: 501px) {
#aboutblock img {
float:left;
width:400px;
margin:1%;
margin: 0% 3% 2% 0%;
}
}
@media all and (max-width: 500px) {
#aboutblock img {
float:none;
width:277px;
margin:1%;
margin: 0% 3% 2% 0%;
}
}
</style>
</head>
</body>
<div class = "blockcontainer">
<div id = "aboutblock">
<img src = "https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJvd2xfbmlnaHRfb3dsX2FuaW1hbC1pbWFnZS1reWJjeWVqaS5qcGc.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien odio, sollicitudin a dolor at, sodales etc etc etc...</p>
<p>Suspendisse potenti. Donec molestie aliquam lacus at laoreet. Donec justo risus, euismod quis augue a, etc etc etc...</p>
<p>Sed efficitur rhoncus tristique. Sed vulputate, velit quis auctor convallis, erat lacus tincidunt sem, etc etc etc... </p>
</div>
</div>
<body>
</html>Это было абсолютно то! Спасибо вам и всем остальным комментаторам за то, что помогли мне, наконец, спокойно выспаться сегодня вечером (в стране, где сейчас определенно довольно поздно).
Пожалуйста, спокойной ночи🙂
Тестовая страница у меня работает так, как и ожидалось.