Как кодировать мультимедийные запросы CSS, предназначенные для ВСЕХ мобильных устройств и планшетов?

Ответ 1

Это можно сделать с помощью запросов уровня 4: (Поддержка браузера неплохая - CaniUse)

Возможности взаимодействия с медиа

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

Функция pointer запрашивает качество механизма указателя, используемого устройством.

hover функция мультимедиа запрашивает способность пользователей наведываться над элементами на странице с заданным устройство.

Итак, чтобы ответить на вопрос...

Мобильные устройства/таблицы аналогичны:

1) Точность первичного механизма ввода устройства ограничена.

Это означает, что мы могли бы использовать следующий медиа-запрос:

@media (pointer:coarse) {
    /* custom css for "touch targets" */
}

div {
  width: 400px;
  height: 200px;
  color: white;
  padding: 15px;
  font-size: 20px;
  font-family: Verdana;
  line-height: 1.3;
  background: green;
}
@media (pointer:coarse) { 
  div {
    background: red;
  }
}

<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#pointer">pointer media feature</a> queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>

Ответ 2

Вместо того, чтобы использовать определенную ширину изначально или возиться с ориентациями или любой другой глупостью, я предлагаю использовать следующий тег мультимедиа...

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
  /* Your click-specific css goes here */
}

И для чего вы используете эти теги? Чтобы настроить материал для зависания и щелчка по событиям касания.

Сенсорные устройства, отличные от нескольких устройств в серых областях, указанных выше, имеют совершенно другое разрешение, чем настольные устройства. Do -not- это для установки элементов дизайна, но элементов навигации. Некоторые пуденты могут кричать, что какое-то безумие с максимальной шириной может быть лучше, но там так много HD-телефонов смешно, что max-width устройства быстро становится бесполезным.

Однако вы должны использовать запросы ширины ширины. Однако не беспокойтесь о максимальной ширине устройства, просто макс-ширине и минимальной ширине. Пусть вышеуказанные теги касаются вашего касания, а не касаются пользователей, пусть min-width vs max-width address на основе размера окна и корректировки визуальных свойств сайта.

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

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

Итак, у вас должно быть что-то вроде этого...

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
    #touch_logo {
       display: inherit;
    }
    #mouse_logo {
       display: none;
    }
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
    #touch_logo {
       display: none;
    }
    #mouse_logo {
       display: inherit;
    }
  /* Your click-specific css goes here */
}
@media (min-width: 541px){
  /* Big view stuff goes here. */
}
@media (max-width: 540px) and (min-width: 400px){
  /* Smaller view stuff goes here. */
}
@media (max-width: 399px){
  /* Stuff for really small views goes here. */
}

Хотя, не забудьте включить в свой заголовок следующее:

<meta name='viewport' content="width=device-width, initial-scale=1" />

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

Ответ 3

У вас есть основные стили рабочего стола в теле файла 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 или%