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

В JavaScript режим ориентации можно определить с помощью: if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } Однако есть ли способ определения ориентации только с помощью CSS? Например. что-то вроде: @media only screen and (width > height) { ... }

159 browser  css  tablet  media-queries 

Я пытаюсь использовать медиа-запросы CSS3, чтобы создать класс, который появляется только тогда, когда ширина больше 400 пикселей и меньше 900 пикселей. Я знаю, что это, вероятно, очень просто, и мне не хватает чего-то очевидного, но я не могу этого понять. Я придумал приведенный ниже код, благодарю за любую помощь. @media …

146 css  media-queries 

Я пытаюсь использовать переменные CSS в медиа-запросе, и это не работает. :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { }

140 css  media-queries  css-variables 

IPhone 5 имеет более длинный экран, и он не улавливает мобильный вид моего сайта. Каковы новые адаптивные дизайнерские запросы для iPhone 5 и можно ли их комбинировать с существующими запросами iPhone? Мой текущий медиа-запрос таков: @media only screen and (max-device-width: 480px) {}

132 iphone  css  responsive-design  media-queries  iphone-5 

Есть ли способ получить ширину устройства пользователя, а не ширину области просмотра, с помощью javascript? Медиа-запросы CSS предлагают это, как я могу сказать @media screen and (max-width:640px) { /* ... */ } и @media screen and (max-device-width:960px) { /* ... */ } Это полезно, если я ориентируюсь на смартфоны в …

131 javascript  css  media-queries 

Как самый безопасный способ с помощью медиа-запросов сделать что-то, что происходит не на устройстве с сенсорным экраном? Если нет возможности, вы предлагаете использовать решение JavaScript, такое как !window.Touchили Modernizr?

123 css  touch  media-queries 

Я пытаюсь совместить использование переменной Sass с запросами @media следующим образом: $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} $base_width затем определяется в различных точках измерения ширины таблицы стилей на основе процентов для создания гибких макетов. Когда я это делаю, кажется, что переменная …

121 sass  media-queries 

Это может показаться глупым вопросом. Если я использую этот фрагмент CSS для обычных дисплеев (где box-bg.png200 на 200 пикселей); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } и если я использую медиа-запрос, подобный этому, для нацеливания на дисплеи сетчатки (с изображением @ 2x, являющимся версией с высоким разрешением); @media (-webkit-min-device-pixel-ratio: …

102 css  responsive-design  media-queries 

По какой-то причине режим эмуляции устройства не читает мои медиа-запросы. Он работает на других сайтах, включая мои собственные, которые я создал с помощью начальной загрузки, но не работает с медиа-запросами, которые я использую с нуля (при нажатии на кнопку медиа-запросов кнопка становится синей, но медиа-запросы не отображаются). Тестовый файл ниже. …

94 css  google-chrome  media-queries  developer-tools 

EDITED: Может быть, мне следует спросить, какой селектор устанавливает боковые отступы, когда экран уменьшается до ширины ниже 480 пикселей? Некоторое время я просматривал bootstrap-responseiveness.css, чтобы найти это, но, похоже, на это ничего не влияет. Оригинал Я в основном хочу удалить любые отступы или поля по умолчанию, установленные для скорости отклика …

89 css  twitter-bootstrap  responsive-design  media-queries 

Как точно распределить медиа-запросы, чтобы избежать дублирования? Например, если мы рассмотрим код: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } Что будет происходить во всех поддерживающих …

89 css  responsive-design  media-queries 

У меня есть класс элемента и компактный класс «модификатор»: .item { ... } .item.compact { /* styles to make .item smaller */ } Это отлично. Однако я хотел бы добавить @mediaзапрос, который заставляет .itemкласс быть компактным, когда экран достаточно мал. На первый взгляд это то, что я пытался сделать: .item …

86 css  sass  media-queries 

Начиная с Bootstrap 3 больше нет отдельных файлов для адаптивных и стандартных таблиц стилей. Итак, как я могу легко удалить отзывчивые функции?

85 twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 

Я работаю с несколькими планшетными устройствами - оба Android и iOS. В настоящее время у меня есть следующие варианты разрешения для всех планшетов. 1280 х 800 1280 x 768 1024 x 768 (очевидно, для iPad) - iPad не имеет этой проблемы Самый простой способ применить стиль, основанный на ориентации устройства, …

84 android  css  media-queries 

В последнее время я разрабатывал более отзывчивые сайты и часто использовал медиа-запросы CSS. Я заметил одну закономерность: действительно имеет значение порядок, в котором определяются медиа-запросы. Я тестировал его не в каждом браузере, а только в Chrome. Есть ли объяснение такому поведению? Иногда становится неприятно, когда ваш сайт работает не так, …

80 css  media-queries  responsive-design