Проблемы с оператором «Не» в медиа-запросе - PullRequest
Новая
       4

Проблемы с оператором «Не» в медиа-запросе

4 голосов
/ 08 марта 2012

Я работаю над адаптивным сайтом, и мой клиент хочет, чтобы определенные стили применялись к рабочему столу с разрешением 768 пикселей, но НЕ к планшетам такого размера. Я пробовал несколько медиа-запросов, но я могу только заставить Firefox сотрудничать. Chrome, Safari и IE игнорируют медиазапрос. Вот что я попробовал. 

 @media only screen and (min-width: 768px), not (min-device-width: 768px) and (max-device-width: 1024px) {
    /* styles for desktop only here */
 }

Я думаю, что это связано с оператором not, но я не вижу, что я делаю что-то не так. Также стоит упомянуть, что ipad (в моем симуляторе) игнорирует медиа-запрос, что именно то, что я хочу. Я просто не могу получить Chrome, Safari и IE на своем рабочем столе, чтобы прочитать чертову вещь.

Ответы [ 2 ]

2 голосов
/ 03 сентября 2012

Каждая строка Media Query, разделенная запятыми, должна быть полностью сформирована (я не знаю, что в спецификации что-либо переносится от одного к следующему ... хотя некоторые Браузеры могут поддерживать здесь «горячие клавиши», разумно придерживаться наименьшего общего знаменателя: спецификации). (Помимо всего прочего, это облегчает тестирование, поскольку простые текстовые моды позволяют тестировать один Media Query за раз.) И, конечно, «только» и «не» являются взаимоисключающими вариантами. Поэтому я думаю, что синтаксис должен быть 

@media only screen and (min-width: 768px), not screen and (min-device-width: 768px) and (max-device-width: 1024px) {

(xxx-device-width: и xxx-width: [с включением или исключением "-device"] относятся к screen width и viewport / layout width соответственно [которые обычно одинаковы для «настольных» устройств и для большинства портативных устройств, если было указано , но не может быть одинаковым для смартфоны без спецификации "viewport" в исходном HTML-коде страницы). Обычно я не вижу их сочетания в одном выражении Media Query, и поэтому [хотя я еще не пытался понять этот пример в деталях], я подозреваю, что что-то немного не так.)

0 голосов
/ 08 марта 2012

Вы не можете сказать планшетам и компьютерам с разрешением медиазапросов: слишком много разных разрешений на другом оборудовании и нет реального общего правила (посмотрите здесь , и это только Androïd!)

Вы должны обнаружить поддержку касания с помощью Javascript, добавить класс в ваш HTML-тэг и создать свой CSS на этой основе, учитывая, что это не 100% улов (есть сенсорные компьютеры).

Попробуйте http://www.modernizr.com/!

...