Шаблоны media-queries для адаптации макетов для мобильных устройств

Так как я коммерчески занимаюсь разработкой сайтов, то недавно ко мне обратились с популярной сегодня просьбой адаптировать текущую верстку сайта ml-art.ru под мобильные устройства. Так как ранее я почти все шаблоны сайтов делал статическими, то в этот раз встал вопрос, а что делать, когда нужен 1 шаблон, который будет не одинаково, но достаточно удобно, просматриваться на разных устройствах (мобильные телефоны, планшеты, и так далее)?

Вот уже несколько лет существует такое понятие как Adaptive Design и Responcive Design. Если вы хотите разобраться в чем разница, то вы можете перейти по ссылкам, там некоторое колличество небезызвестных в рунете гиков, дискутируя на эту тему, таки приходят к понимаю того в чем же разница. Я так и не понял.

https://github.com/web-standards-ru/dictionary/issues/84
https://www.responsys.com/blogs/nsm/cross-channel-marketing/difference-responsive-adaptive-web-design/
http://alistapart.com/article/responsive-web-design

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

Несколько дней гугления и практики, дали мне понять, что в основе адаптивной верстки лежат следующие, достаточно простые и старые, принципы. Старые потому, что такое понятие как резиновая верстка, было введено еще динозавром отечественного сайтостроения, Атремием Лебедевым, и заключалось в запихивании всей верстки в таблицу, а ячейкам таблицы задавались процентные значения. Принцип резиновости от части сохранился и в адаптивном дизайне, но реализуется иначе.

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

2. Во-вторых, макет строится на основе сетки и является гибким. То есть в сравнении с резиновой, табличной версткой тут уже естественно нет никаких таблиц, а есть лишь grid-based layout или fluid grid, которая совместно с использованием % и em для значений css свойств font-size, line-height, height и width, а также с использованием media-queries для определения разрешений устройств, может содержать различное количество колонок. За счет этого и достигается динамика. То есть вы как бы говорите браузеру с какого устройства и с каким разрешением зашли на сайт, и подкладываете в зависимости от разрешения определенное количество колонок, или передаете определенное значение float: left или float: right или clear: both в зависимости от ситуации, а также масштабируете размеры шрифта заголовков и абзацев текста.

3. В третьих, изображения перестают быть статическими, и им задается динамическое значение ширины в пределах блока через css. То есть используется технология гибких изображений, flexible images, вы достигаете масштабирование изображений на 100% в пределах контейнера. Делается это через задание следующих css правил

  1.  
  2. div {
  3. width: 100%;
  4. max-width: 100%;
  5. height: auto;
  6. position: relative;
  7. display: block;
  8. }
  9. div img {
  10. width: 100%;
  11. height: auto;
  12. display: block;
  13. }
  14.  

4. В четвертых, динамика шаблонов в зависимости от устройств достигается благодаря появившемуся в CSS 3.0 свойству media-queries на основании которого вычисляется минимально или максимальное разрешение экрана или разрешение устройства, и отдается в это устройство особый файл стилей.

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

Мобильные Таблетки ПК и ноутбуки
240*320
320*480\240
480*800
800*600\480
1024*768\600
От 1024 пикселей

Стандартный шаблон media-queries выглядит примерно так:

  1.  
  2. /* Smartphones (portrait and landscape) ----------- */
  3. @media only screen
  4. and (min-device-width : 320px)
  5. and (max-device-width : 480px) {
  6. /* Styles */
  7. }
  8.  
  9. /* Smartphones (landscape) ----------- */
  10. @media only screen
  11. and (min-width : 321px) {
  12. /* Styles */
  13. }
  14.  
  15. /* Smartphones (portrait) ----------- */
  16. @media only screen
  17. and (max-width : 320px) {
  18. /* Styles */
  19. }
  20.  
  21. /* iPads (portrait and landscape) ----------- */
  22. @media only screen
  23. and (min-device-width : 768px)
  24. and (max-device-width : 1024px) {
  25. /* Styles */
  26. }
  27.  
  28. /* iPads (landscape) ----------- */
  29. @media only screen
  30. and (min-device-width : 768px)
  31. and (max-device-width : 1024px)
  32. and (orientation : landscape) {
  33. /* Styles */
  34. }
  35.  
  36. /* iPads (portrait) ----------- */
  37. @media only screen
  38. and (min-device-width : 768px)
  39. and (max-device-width : 1024px)
  40. and (orientation : portrait) {
  41. /* Styles */
  42. }
  43.  
  44. /* Desktops and laptops ----------- */
  45. @media only screen
  46. and (min-width : 1224px) {
  47. /* Styles */
  48. }
  49.  
  50. /* Large screens ----------- */
  51. @media only screen
  52. and (min-width : 1824px) {
  53. /* Styles */
  54. }
  55.  
  56. /* iPhone 4 ----------- */
  57. @media
  58. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  59. only screen and (min-device-pixel-ratio : 1.5) {
  60. /* Styles */
  61. }
  62.  

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