Запитання з тегом «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 (max-width:400px) and …

141 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) { /* ... */ } Це корисно, якщо я орієнтуюсь на смартфони в …

128 javascript  css  media-queries 

Який найбезпечніший спосіб зробити медіа-запити, щоб щось сталося, коли не на пристрої з сенсорним екраном? Якщо немає можливості, чи пропонуєте ви використовувати таке рішення JavaScript, як !window.TouchModernizr?

122 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 Потім визначається в різних точках вимірювання на основі процентної ширини таблиці стилів для створення макетів рідини. Коли я це роблю, здається, що змінна …

120 sass  media-queries 

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

102 css  responsive-design  media-queries 

З якоїсь причини режим емуляції пристрою не читає мої медіа-запити. Він працює на інших сайтах, включаючи мої власні сайти, які я зробив із bootstrap, але не працює з медіа-запитами, які я використовую з нуля (натискання кнопки мультимедійних запитів робить цю кнопку синьою, але медіа-запити не відображаються). Тестовий файл нижче. Це …

94 css  google-chrome  media-queries  developer-tools 

ВИДАЛЕНО: Може, я повинен запитати, який селектор встановлює бічні відступи, коли екран зменшується до ширини нижче 480 пікселів? Я деякий час переглядав bootstrap-responsiveness.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 */ } Що станеться з усіма підтримуючими …

88 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 x 800 1280 x 768 1024 x 768 (iPad, очевидно) - iPad не має цієї проблеми Найпростіший спосіб застосувати стиль, орієнтований на пристрій, - використовувати …

83 android  css  media-queries 

За допомогою медіа-запитів CSS ви можете max-device-widthнацілювати ширину пристрою (наприклад, iPhone або Android) та / або a, max-widthяка націлена на ширину сторінки. Якщо ви використовуєте max-device-width, коли ви змінюєте розмір вікна браузера на робочому столі, CSS не змінюється, оскільки ваш робочий стіл не змінює розмір. Якщо ви використовуєте max-width, коли …

82 css  responsive-design  media-queries