CSS Media Query для нескольких разрешений - PullRequest
Новая
       7

CSS Media Query для нескольких разрешений

2 голосов
/ 11 ноября 2011

Я рассматриваю использование CSS Media Query для поддержки нескольких планшетов (Android / iPad). Ниже приведен медиазапрос, который у меня есть; 

<link rel="stylesheet" media="only screen and (max-device-width:1024px)" href="css/tablet.css">
<link rel="stylesheet" media="only screen and (min-device-width:1024px)" href="css/desktop.css">

Теперь я предполагаю, что большинство планшетов имеют ширину менее 1024 пикселей. Пожалуйста, поправьте меня на этом фронте. Любое табличное сравнение было бы здорово.

Также подойдут любые другие подходы, кроме ширины устройства для медиазапроса.

Я смотрю на общий способ разработки своих страниц, который бы работал как для настольных компьютеров / планшетов, так и для настоящих и будущих (и даже для мобильных устройств). Я использую текучий дизайн (или так называемый адаптивный дизайн) для того же (все в% ... ширина / высота / отступы / поля все в%)

1 Ответ

2 голосов
/ 11 ноября 2011

Имейте в виду, что такое устройство, как iPad, можно использовать как в книжной, так и в альбомной ориентации, поэтому я бы использовал следующий медиазапрос: 

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

    /* .touch class from Modernizr */
    .touch .element {color: #fff;}

}

Или, если вы хотите сохранить стили в своем собственном документе:

<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width:1024px)" href="css/tablet.css">

Примечание: Обычно вы можете обнаруживать планшеты, комбинируя медиазапросы с библиотекой обнаружения функций, такой как Modernizr .

...