Вопросы с тегом «media-queries»

Медиа-запросы позволяют условное применение стилей CSS на основе типов мультимедиа, таких как экран и печать, и условий мультимедийных функций, таких как область просмотра, высота и ширина устройства. Они являются частью спецификации W3C CSS3.

5
В чем разница между «экраном» и «только экраном» в медиа-запросах?
В чем разница между 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 ? Разве screenсама по себе не предоставляет достаточно информации для отображения только на экране? Я видел много адаптивных …
487 css  media-queries 
15
Медиа-запросы: как настроить таргетинг на настольные ПК, планшеты и мобильные устройства?
Я проводил некоторые исследования медиазапросов и до сих пор не понимаю, как настроить таргетинг на устройства определенных размеров. Я хочу иметь возможность ориентироваться на настольные ПК, планшеты и мобильные устройства. Я знаю, что будут некоторые несоответствия, но было бы неплохо иметь общую систему, которая может использоваться для нацеливания на эти …
18
Twitter Bootstrap 3: как использовать медиа-запросы?
Я использую Bootstrap 3 для создания адаптивного макета, в котором я хочу настроить несколько размеров шрифта в соответствии с размером экрана. Как я могу использовать медиа-запросы для создания такой логики?
11
Могут ли медиазапросы изменять размер на основе элемента div вместо экрана?
Я хотел бы использовать медиа-запросы для изменения размера элементов в зависимости от размера divэлемента, в котором они находятся. Я не могу использовать размер экрана, поскольку divон используется просто как виджет на веб-странице, и его размер может варьироваться. Обновить Похоже, что над этим сейчас ведется работа: https://github.com/ResponsiveImagesCG/cq-demos
317 css  media-queries 
12
Можно ли встроить правила CSS @media?
Мне нужно динамически загружать изображения баннеров в приложение HTML5 и хотелось бы, чтобы несколько разных версий соответствовали ширине экрана. Я не могу правильно определить ширину экрана телефона, поэтому я могу думать только о том, чтобы добавить фоновые изображения div и использовать @media, чтобы определить ширину экрана и отобразить правильное изображение. …
293 html  css  media-queries 
8
В чем разница между max-device-width и max-width для мобильного Интернета?
Мне нужно разработать html-страницы для телефонов iphone / android, но в чем разница между max-device-widthи max-width? Мне нужно использовать разные CSS для разных размеров экрана. @media all and (max-device-width: 400px) @media all and (max-width: 400px) Какая разница?
5
@Media min-width & max-width
У меня есть эта @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 HERE */ } @media only screen and (max-device-width: 480px) { /* STYLES …
3
@ media media query и синтаксическое столкновение бритвы ASP.NET MVC
У меня есть большой сайт, который работает в ASP.NET MVC с использованием движка Razor. У меня есть базовая таблица стилей, которая содержит все общие стили для всего сайта. Тем не менее, иногда у меня есть стили, специфичные для каждой <head>страницы - обычно это одна или две строки. Мне не особенно …
17
$ (window) .width () не то же самое, что медиа-запрос
Я использую Twitter Bootstrap в проекте. Наряду со стилями начальной загрузки по умолчанию я также добавил несколько своих //My styles @media (max-width: 767px) { //CSS here } Я также использую jQuery для изменения порядка определенных элементов на странице, когда ширина области просмотра меньше 767 пикселей. $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { …
16
Почему мои медиа-запросы CSS3 не работают?
В файле styles.css я использую медиазапросы, в обоих из которых используется вариант: /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } Когда я уменьшаю окно, сайты меняют размер до нужного мне макета в обычном браузере (Safari, Firefox), однако макет мобильного телефона …
11
Поддержка IE8 для CSS Media Query
IE8 не поддерживает следующий медиа-запрос CSS: @import url("desktop.css") screen and (min-width: 768px); Если нет, какой альтернативный способ написания? То же самое отлично работает в Firefox. Есть проблемы с кодом ниже? @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);
19
CSS @media печатает проблемы с background-color;
Я новичок в этой компании, и у нас есть продукт, который использует мили CSS. Я пытаюсь создать для нашего приложения таблицу стилей для печати, но у меня проблемы с background-colorin @media print. @media print { #header{display:none;} #adwrapper{display:none;} td { border-bottom: solid; border-right: solid; background-color: #c0c0c0; } } Все остальное работает, …
176 css  media-queries 
10
Bootstrap 3 точки останова и медиа-запросы
В документации по медиазапросам Bootstrap 3 написано: Мы используем следующие медиа-запросы в наших файлах Less, чтобы создать ключевые точки останова в нашей сеточной системе. Очень маленькие устройства (телефоны, менее 768 пикселей): нет медиазапроса, так как это по умолчанию в Bootstrap Небольшие устройства (планшеты, 768 пикселей и выше): @media (min-width: @screen-sm-min) …
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.