Можно ли использовать calc() в медазапросе?
Есть такой медиазапрос:
@media screen and (max-width: calc((100vh - 389px) * 1.715)) |
@media screen and (max-width: calc((100vh - 389px) * 1.715))
Корректно ли использовать calc() в медиазапросе?
Пишут, что его испоользовать нельзя, но в браузере все корректно отрабатывает.
Дополнительно:
Зачем?
Ты пишешь медиа запрос, заранее известное значение - это нужное тебе разрешение экрана.
Для которого хочешь изменить вид страницы.
Если тебе нужно что-то отнимать, чтобы твоя страница выглядела как нужно, это плохо.
Но для сайта, да, странно.
Вероятно вам нужен медиазапрос на соотношение сторон
https://developer.mozilla.org/en-US/docs/Web/CSS/@...
Там вообще много разных вариантов https://developer.mozilla.org/en-US/docs/Web/CSS/C...
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Да, можно использовать функцию calc() в медиа-запросе для определения стилей CSS в зависимости от различных условий. Функция calc() позволяет выполнять математические операции в CSS, что делает ее очень удобной для создания адаптивных дизайнов.
Например, если вам нужно изменить ширину блока в зависимости от ширины экрана, вы можете использовать calc() в медиа-запросе следующим образом:
@media screen and (max-width: 768px) { .block { width: calc(100% - 20px); } }
В этом примере, если ширина экрана меньше или равна 768px, ширина блока будет равна 100% минус 20px. Это позволяет создавать гибкие и адаптивные дизайны, которые будут хорошо выглядеть на любых устройствах.
Таким образом, использование функции calc() в медиа-запросах может быть очень полезным инструментом для создания адаптивных стилей CSS. Не забывайте проверять совместимость с браузерами, чтобы убедиться, что ваш дизайн будет отображаться корректно на всех устройствах.