Список популярных медиазапросов

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

Этот список приведен ниже, пользуйтесь на здоровье!

@media only screen and (max-width : 1920px) { /* CSS правила */ }
@media only screen and (max-width : 1680px) {}
@media only screen and (max-width : 1366px) {}
@media only screen and (max-width : 1280px) {}
@media only screen and (max-width : 1024px) {}
@media only screen and (max-width : 800px)  {}
@media only screen and (max-width : 768px)  {}
@media only screen and (max-width : 600px)  {}
@media only screen and (max-width : 533px)  {}
@media only screen and (max-width : 360px)  {}
@media only screen and (max-width : 320px)  {}
@media only screen and (max-width : 240px)  {}
@media only screen and (max-width : 176px)  {}

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

@media all and (orientation: landscape) {
  /* CSS правила для устройства в альбомном режиме */
}

@media all and (orientation: portrait) {
   /* CSS правила для устройства в портретном режиме */
}

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

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