Отзывчивые стили css на мобильных устройствах ТОЛЬКО

Я стараюсь, чтобы мои гибкие стили CSS работали только на планшетах и ​​смартфонах. В принципе у меня есть стиль для рабочего стола, стиль для мобильных: портрет и стиль для мобильных: пейзаж. Я не хочу, чтобы мобильные стили мешали презентации рабочего стола. Я играю с бесчисленными мультимедийными запросами, но результат: либо мобильные стили отображаются на рабочем столе, либо мобильные стили отображаются только на мобильных устройствах, но только с одним набором правил (не реагирует). Есть ли способ, которым я могу сохранить эти два полностью отдельно?

Мой код, который у меня сейчас, выглядит следующим образом:

/* regular desktop styles */

@media only screen 
and (max-device-width: 600px)
 { ... }

/* mobile only styles when the device is 0-600px in maximum width */

@media only screen 
and (max-device-width: 1000px)
{ ... }

/* mobile only styles when the device is up to 1000px in maximum width */

ОТВЕТЫ

Ответ 1

То, что у вас там, должно быть прекрасным для работы, но нет реального медиа-запроса "Is Mobile/Tablet", поэтому вы всегда будете застревать.

Существуют медиа-запросы для общих точек останова, но с постоянно меняющимся диапазоном устройств они не гарантируют работу в будущем.

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

Чтобы продолжить ответ выше, использование Modernizr с тестом "без касания" позволит вам ориентировать сенсорные устройства, которые, скорее всего, являются планшетами и смартфонами, однако с новыми выпусками сенсорных экранов это не так хорошо, как это когда-то было.

Ответ 2

Почему бы не использовать диапазон запросов на мультимедиа.

В настоящее время я работаю над гибким макетом для своего работодателя, а диапазоны, которые я использую, следующие:

У вас есть основные стили рабочего стола в теле файла CSS (1024px и выше), а затем для определенных размеров экрана, которые я использую:

@media all and (min-width:960px) and (max-width: 1024px) {
  /* put your css styles in here */
}

@media all and (min-width:801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width:769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width:569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width:481px) and (max-width: 568px) {
  /* put your css styles in here */
}

@media all and (min-width:321px) and (max-width: 480px) {
  /* put your css styles in here */
}

@media all and (min-width:0px) and (max-width: 320px) {
  /* put your css styles in here */
}

Это будет охватывать почти все используемые устройства - я бы сосредоточился на правильном выборе стиля для размеров в конце диапазона (то есть 320, 480, 568, 768, 800, 1024), как и для всех остальных, которые они будет просто реагировать на доступный размер.

Кроме того, не используйте px в любом месте - используйте em или%.

Ответ 3

Да, это можно сделать с помощью обнаружения функции javascript (или обнаружения браузера, например Modernizr). Затем используйте yepnope.js для загрузки необходимых ресурсов (JS и/или CSS)

Ответ 4

Мне пришлось решить подобную проблему - я хотел, чтобы некоторые стили применились только к мобильным устройствам в ландшафтном режиме. По сути, шрифты и межстрочный интервал выглядели отлично в любом другом контексте, поэтому мне просто нужно было одно исключение для мобильного ландшафта. Этот мультимедийный запрос работал отлично:

@media all and (max-width: 600px) and (orientation:landscape) 
{
    /* styles here */
}