2013-05-06 2 views
0

У меня есть таблица стилей устройств, загружаемая для работы с отзывчивым дизайном на веб-сайте, но я изо всех сил пытаюсь сгруппировать несколько разных медиа-запросов именно так, как я хочу.Запросы на средства массовой информации - таргетинг на определенные устройства вместе

У меня есть общий набор стилей для небольшого веб-окна, мобильного устройства при любом повороте и iPad только на портрете.

На данный момент я получаю все, кроме IPad с этим запросом:

@media all and (max-device-width: 480px), all and (max-width: 480px) 

Я получаю IPad в портретном с этим кодом:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 

Как совместить эти два медиа-запроса?

+0

Можете привести пример? или предложить почему? Мобильные/смартфоны и планшеты - это разные устройства. iPads также могут быть проблематичными, поскольку разные поколения имеют разные разрешения экрана. – nickhar

+0

Короткий ответ: требования клиентов. В основном, они хотят, чтобы их мобильный сайт для телефонов и весь сайт выглядел хорошо и хорошо функционировал на iPad в ландшафте, но не на портрете, поэтому им нужна версия мобильного сайта на портретном представлении. Невозможно объединить запрос с обеими этими переменными? В настоящий момент моя временная работа полностью дублирует стили, которые глупы. –

ответ

0

Хорошо, для всех, у кого есть эта проблема.

Для этого я закончил использование медиа-запросов, чтобы загрузить таблицу стилей, а не встраивать медиа-запрос в мою таблицу стилей.

<link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px), all and (max-width: 480px)" href="device.css" /> 
<link rel="stylesheet" type="text/css" media="@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" href="device.css" /> 
Смежные вопросы