Медиа-запросы позволяют условное применение стилей CSS на основе типов мультимедиа, таких как экран и печать, и условий мультимедийных функций, таких как область просмотра, высота и ширина устройства. Они являются частью спецификации W3C CSS3.
При написании медиазапроса CSS, есть ли способ указать несколько условий с помощью логики «ИЛИ»? Я пытаюсь сделать что-то вроде этого: /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) { ... }...
В чем разница между screen и only screenв медиа-запросах? <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> Почему мы должны использовать only screen ? Разве...
Я проводил некоторые исследования медиазапросов и до сих пор не понимаю, как настроить таргетинг на устройства определенных размеров. Я хочу иметь возможность ориентироваться на настольные ПК, планшеты и мобильные устройства. Я знаю, что будут некоторые несоответствия, но было бы неплохо иметь...
Я использую Bootstrap 3 для создания адаптивного макета, в котором я хочу настроить несколько размеров шрифта в соответствии с размером экрана. Как я могу использовать медиа-запросы для создания такой...
Я хотел бы использовать медиа-запросы для изменения размера элементов в зависимости от размера divэлемента, в котором они находятся. Я не могу использовать размер экрана, поскольку divон используется просто как виджет на веб-странице, и его размер может варьироваться. Обновить Похоже, что над этим...
Мне нужно динамически загружать изображения баннеров в приложение HTML5 и хотелось бы, чтобы несколько разных версий соответствовали ширине экрана. Я не могу правильно определить ширину экрана телефона, поэтому я могу думать только о том, чтобы добавить фоновые изображения div и использовать...
Я нашел этот фрагмент кода в файле CSS, который унаследовал, но не могу понять из этого: @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } В частности, что происходит на первой...
Мне нужно разработать html-страницы для телефонов iphone / android, но в чем разница между max-device-widthи max-width? Мне нужно использовать разные CSS для разных размеров экрана. @media all and (max-device-width: 400px) @media all and (max-width: 400px) Какая...
У меня есть эта @mediaнастройка: HTML : <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS : @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES...
У меня есть большой сайт, который работает в ASP.NET MVC с использованием движка Razor. У меня есть базовая таблица стилей, которая содержит все общие стили для всего сайта. Тем не менее, иногда у меня есть стили, специфичные для каждой <head>страницы - обычно это одна или две строки. Мне не...
Я использую Twitter Bootstrap в проекте. Наряду со стилями начальной загрузки по умолчанию я также добавил несколько своих //My styles @media (max-width: 767px) { //CSS here } Я также использую jQuery для изменения порядка определенных элементов на странице, когда ширина области просмотра меньше...
В файле styles.css я использую медиазапросы, в обоих из которых используется вариант: /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } Когда я уменьшаю окно, сайты меняют размер до...
IE8 не поддерживает следующий медиа-запрос CSS: @import url("desktop.css") screen and (min-width: 768px); Если нет, какой альтернативный способ написания? То же самое отлично работает в Firefox. Есть проблемы с кодом ниже? @import url("desktop.css") screen; @import url("ipad.css") only screen and...
Я новичок в этой компании, и у нас есть продукт, который использует мили CSS. Я пытаюсь создать для нашего приложения таблицу стилей для печати, но у меня проблемы с background-colorin @media print. @media print { #header{display:none;} #adwrapper{display:none;} td { border-bottom: solid;...
В документации по медиазапросам Bootstrap 3 написано: Мы используем следующие медиа-запросы в наших файлах Less, чтобы создать ключевые точки останова в нашей сеточной системе. Очень маленькие устройства (телефоны, менее 768 пикселей): нет медиазапроса, так как это по умолчанию в Bootstrap...
В JavaScript режим ориентации можно определить с помощью: if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } Однако есть ли способ определения ориентации только с помощью CSS? Например. что-то вроде: @media only screen and (width > height) { ......
Я пытаюсь использовать медиа-запросы CSS3, чтобы создать класс, который появляется только тогда, когда ширина больше 400 пикселей и меньше 900 пикселей. Я знаю, что это, вероятно, очень просто, и мне не хватает чего-то очевидного, но я не могу этого понять. Я придумал приведенный ниже код,...
Я пытаюсь использовать переменные CSS в медиа-запросе, и это не работает. :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { }
IPhone 5 имеет более длинный экран, и он не улавливает мобильный вид моего сайта. Каковы новые адаптивные дизайнерские запросы для iPhone 5 и можно ли их комбинировать с существующими запросами iPhone? Мой текущий медиа-запрос таков: @media only screen and (max-device-width: 480px)...
Есть ли способ получить ширину устройства пользователя, а не ширину области просмотра, с помощью javascript? Медиа-запросы CSS предлагают это, как я могу сказать @media screen and (max-width:640px) { /* ... */ } и @media screen and (max-device-width:960px) { /* ... */ } Это полезно, если я...