Каковы наиболее важные медиа-запросы, которые нужно использовать при создании мобильного адаптивного дизайна?

Ответ 1

Я бы рекомендовал после Twitter Bootstrap только с этими четырьмя медиа-запросами:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Изменить: оригинальный ответ (выше) был взят из Bootstrap версии 2. Bootstrap с тех пор изменил свои медиа-запросы в версии 3. Обратите внимание, что нет явного запроса для устройств размером меньше 768 пикселей. Эта практика иногда называется mobile-first. Все вне любого медиа-запроса применяется ко всем устройствам. Все внутри блока запросов мультимедиа расширяет и отменяет то, что доступно во всем мире, а также стили для всех более мелких устройств. Подумайте об этом как о прогрессивном улучшении для гибкого дизайна.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Посмотрите на Bootstrap 3 docs.

Ответ 2

• Дизайн в процентах и ​​первоначально оптимизированный для экрана 15 "+.

• Просмотрите, какие компоненты вы хотите видеть на телефоне - просто сохраните необходимый контент и удалите элементы, которые не работают или загромождают небольшой экран. Эти стили могут содержаться в @media (max-width: 480px) {...}

• По мере перехода на 10 "или меньше, переработайте свои кнопки и интерактивные компоненты для пальцев, а не для мыши. @media (max-width: 767px) {...}

• Уменьшить ширину вашего браузера. Когда все выглядит не так хорошо, заходите в консоль и выясните, какие стили можно изменить или элементы, которые нужно переделать или удалить. Отметьте, на какой ширине экрана они появляются, и создайте медиа-запрос.

• В конце просмотрите свои медиа-запросы, чтобы узнать, можно ли их сгруппировать (т.е. если у вас есть ширина 750 и 767 пикселей, вы можете точно так же комбинировать их в 767).

Если вам удобно w jQuery, вы можете добавить

$(window).resize(function(){
  console.log($(window).width());
}); 

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

Ответ 3

Первый код Bootstrap Twitter, на который ссылается @cjlarose, предполагает, что вы создали свой основной CSS для отображения, который находится между 980px и 1200px в ширину, поэтому вы, по сути, начинаете с дизайна рабочего стола и адаптируете все остальные из него,

Я рад, что Twitter изменился на "mobile first" в Bootstrap 3. Это один из самых популярных подходов к медиа-запросам, и способ, которым я предпочитаю это делать. Вы начинаете с наименьшего размера, а не с рабочего стола.

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

Вот некоторые мультимедийные запросы, которые я нашел наиболее полезными. Это лишь некоторые примеры:

/* Start with baseline CSS, for the smallest browsers. 
   Sometimes I put this into a separate css file and load it first.
   These are the "mobile first" styles. */

...


/* Then progressively add bigger sizes from small to large */

/* Smartphones start somewhere around here */
@media (min-width: 300px) {
}

/* You might do landscape phones here if your content seems to need it */
@media (min-width: 450px) {
}

/* Starting into tablets somewhere in here */
@media (min-width: 600px) {
}

/* Perhaps bigger tablets */
@media (min-width: 750px) {
}

/* Desktop screen or landscape tablet */
@media (min-width: 900px) {
}

/* A bit bigger if you need some adjustments around here */
@media (min-width: 1100px) {
}

/* Widescreens */
@media (min-width: 1500px) {
}

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

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