Не работает @media?
Начал делать тестовый сайт, для проверки свойства display и адаптивности. решил проверить смену display:inline-block на block через media запрос,но ничего не работает
<div class="content"> <div class="cube cube1">text</div> <div class="cube cube2">text</div> <div class="cube cube3">text</div> </div> |
<div class="content"> <div class="cube cube1">text</div> <div class="cube cube2">text</div> <div class="cube cube3">text</div> </div>
.cube { position:relative; display:inline-block; height:50px; width:75px; top:250px; left:500px; } @media screen and (max-width:768px) { .cube {display:block;} } |
.cube { position:relative; display:inline-block; height:50px; width:75px; top:250px; left:500px; } @media screen and (max-width:768px) { .cube {display:block;} }
Дополнительно:
Тире вместо двоеточия.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .cube { position: relative; display: inline-block; height: 50px; width: 75px; top: 250px; left: 500px; background-color: blue; color: white; text-align: center; line-height: 50px; font-family: Arial, sans-serif; font-size: 14px; } </style> </head> <body> <div class="content"> <div class="cube cube1">text</div> <div class="cube cube2">text</div> <div class="cube cube3">text</div> </div> </body> </html> |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .cube { position: relative; display: inline-block; height: 50px; width: 75px; top: 250px; left: 500px; background-color: blue; color: white; text-align: center; line-height: 50px; font-family: Arial, sans-serif; font-size: 14px; } </style> </head> <body> <div class="content"> <div class="cube cube1">text</div> <div class="cube cube2">text</div> <div class="cube cube3">text</div> </div> </body> </html>
- Taulan Khatuaev на телефоне работает, в devtools chrome нет
- fb404, я код не много изменил возможно то что на вашем телефоне ширина больше чем 768px
- Taulan Khatuaev, не в этом проблема была. Devtool работал криво
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы корректно использовать медиа-запросы в CSS, необходимо учитывать несколько важных моментов. Вот несколько возможных причин, почему медиа-запросы могут не работать:
1. Неправильный синтаксис медиа-запроса: убедитесь, что вы используете правильный синтаксис для медиа-запросов. Например, для стилей для экранов шириной до 768 пикселей вы должны написать следующее:
@media screen and (max-width: 768px) { /* Ваши стили для устройств с шириной до 768px */ }
2. Порядок подключения стилей: убедитесь, что ваши стили для медиа-запросов подключены после основных стилей. Иначе браузер может перезаписать ваши стили для медиа-запросов обычными стилями.
3. Кеширование стилей: иногда браузер может кешировать старые стили и не обновлять их при изменении размера экрана. Попробуйте очистить кэш браузера или воспользоваться инкогнито-режимом для проверки.
4. Вложенность медиа-запросов: если у вас есть вложенные медиа-запросы, убедитесь, что они правильно настроены и не пересекаются друг с другом.
Если после всех этих шагов медиа-запросы все еще не работают, возможно, проблема заключается в другом месте кода. Проверьте другие стили, скрипты или библиотеки, которые могут влиять на отображение страницы.