Разрешения для адаптивной верстки

Содержание

Адаптивная верста без заморочек

При разработке сайта учитывайте восприятие сайта гуглом, проверить этот параметр можно тут: https://search.google.com/search-console/mobile-friendly,https://testmysite.withgoogle.com/intl/ru-ru/,https://developers.google.com/speed/pagespeed/insights/. Приложение проверяет расширение 480 пикселей, именно это расширение нужно поправить для того чтобы максимально подружиться с гуглом. Другие расширения можно не трогать.

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

Смартфоны
@media only screen and (min-width : 320px) and (max-width : 479px) {

/*Тут будет CSS код для разрешения 320 пикселей и до 479 пикселей*/

}

Смартфоны 2
@media only screen and (min-width : 480px) and (max-width : 767px) {

/*Тут будет CSS код для разрешения 480 пикселей и до 767 пикселей*/

}

Планшеты
@media only screen and (min-width : 768px) and (max-width : 1023px) {}

Настольные компьютеры и ноутбуки
@media only screen and (min-width : 1024px) and (max-width : 1223px) {}

Настольные компьютеры и ноутбуки 2
@media only screen and (min-width : 1223px) and (max-width : 1599px) {}

Настольные компьютеры и ноутбуки 3
@media only screen and (min-width : 1600px) and (max-width : 1919px) {}

Большие экраны
@media only screen and (min-width : 1920px) {}

Адаптивная верстка — разрешения для смартфонов

240х320, 320х240 Nokia 225, Nokia Asha 230, Nokia 220, Samsung Galaxy Pocket, Samsung GT-C3590, HTC WildFire, HTC Touch2 320х480, 480х320 Samsung Galaxy S II, Samsung Galaxy Fame, Samsung Galaxy Young, Samsung Rex, Samsung Galaxy Pro, Nokia X6, Nokia E7, HTC Legend, HTC Salsa, HTC Hero, Apple iPhone 3 480х800, 800х480 Samsung Galaxy S III mini, Samsung Galaxy Golden GT, Samsung Galaxy Grand Neo, Nokia Lumia, Nokia X, Nokia XL, HTC Desire 300-500 540х960, 960х540 Samsung Galaxy Core, Samsung Galaxy S4 mini, HTC Desire 600-700, HTC One S, HTC Sensation XE, Sony Xperia 640х1136, 1136х640 Apple iPhone 4, Apple iPhone 5 720х1280, 1280х720 Samsung Galaxy S III, Samsung Galaxy Note, Samsung Galaxy Grand, Nokia Lumia 900+, Sony Xperia T2 Ultra, Sony Xperia Z1 Compact 750х1334, 1334×750 iPhone 6 1080х1920, 1920х1080 Samsung Galaxy S4, Samsung Galaxy S5, Samsung Galaxy Note 3, Nokia Lumia 1520, Sony Xperia Z1, Sony Xperia Z2, Sony Xperia Z Ultra, HTC One, HTC One MAX, HTC One M8 1440х2560, 2560х1440 LG G3, Samsung Galaxy S6

Современный телефон поворачивает экран при смене ориентации с портретной на ландшафтную, что приводит к необходимости создания отдельных дизайнов для каждой его ориентации. При этом дизайны для разных телефонов, даже имеющие одинаковую ширину, могут значительно отличаться. Например, iPhone 3 в горизонтальной ориентации имеет разрешение 480х320, а HTC Desire 300 в вертикальном положении имеет экран 480х800. И хотя ширина у обоих опорных дизайнов одинакова, из-за различной высоты этих экранов потребуется совершенно различный дизайн — ведь их экраны способны вместить совершенно различное количество интерфейсных элементов.

рис. Конфигурация элементов при одинаковой ширине, но различной высоте экрана
(HTC Desire 300 — 480×800, iPhone 3 — 480×320):

Вы видите, что, несмотря на одинаковую ширину экранных разрешений этих устройств в различных ориентациях, они фактически имеют разный размер: вертикальный HTC значительно уже горизонтального iPhone. Это обусловлено тем, что на 1 дюйме экрана iPhone 3 вмещает 165 пикселей, а экран HTC Desire 300 гораздо качественнее (217 пикселей/дюйм), что и приводит к этой разнице. Этот пример наглядно показывает, почему для многих ширин экрана делается по два (и иногда по 3) различных адаптивных дизайна.

Как сделать адаптивную верстку сайта

Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами <head></head> вставьте следующий код:

<meta name=»viewport» content=»width=device-width, initial-scale=1″>

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

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

Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

Но ведь этого не может быть!

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

Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

Адаптивная верстка CSS media запросы

Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.

Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

@media screen and (min-width: 1440px) and (max-width: 1599px){ }

Это код означает, что стили заключенные между “{ } ” будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.

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

Самые важные разрешения экрана, при адаптивной верстке

  • 320 px — Мобильные устройства (портретная ориентация);
  • 480 px — Мобильные устройства (альбомная ориентация);
  • 600 px — Небольшие планшеты;
  • 768 px — Планшеты (портретная ориентация);
  • 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
  • 1280 px и более — PC.

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

bootstrap адаптивный дизайн

Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

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

Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:

<div class=»col-md-8 «></div> <div class=»col-md-4»></div>

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

Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

<div class=»col-md-10 col-md-offset-1 «> </div>

Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

Если разобраться, то работа с бутстрап делает работу с адаптивным дизайном очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.

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

Что такое разрешение экрана?

Разрешение дисплея — это величина, которая обозначает количество пикселей на дисплее в длину и ширину. Этот параметр важен, потому что определяет четкость изображения каждого смартфона.

В большинстве случаев это слишком большая ширина экрана, времени для такой оптимизации недостаточно. Хорошо изучите ширину, используемую вашими пользователями, и сосредоточьтесь на них. Самое распространенное — это, по крайней мере, сделать это на 480 пикселей.

Например, для ширины более 200 пикселей. Как вы можете видеть, у нас могут быть совершенно разные стили каждой ширины экрана, для которых мы хотим оптимизировать наш дизайн. Если вы хотите даже разделить таблицы стилей, вы можете это сделать. Например, если вы хотите загрузить отдельную таблицу стилей для ширины экрана менее 480 пикселей.

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

Браузеры, поддерживающие запросы СМИ

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

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

На данный момент 99 процентов смартфонов выходят с тремя типами экранов

  • HD (1280x 720, 720p);
  • Full HD (1920×1080, 1080p );
  • Quad HD (2560×1440, 1440p ).

Какое разрешение экрана выбрать?

Одним из самых популярных разрешений дисплея смартфона является 1280 на 720 пикселей — HD . Практически все гаджеты бюджетного ценового сегмента оснащены именно таким показателем.

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

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

Более мощные устройства оборудованы дисплеями с бОльшим разрешением. Смартфоны с экранами 1920 на 1080 появились давно и уже никого не удивляют. Если диагональ смартфона составляет от 4,5 до 5,5 дюймов, лучше всего подойдет экран 1920×1080 точек (Full HD). При меньшем разрешении на изображении будут заметны пиксели, и пользователь может ощутить дискомфорт. Наверно, это и есть золотая середина — цены невысокие, изображение четкое и яркое.

Настроить окно дисплея

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

При диагонали более 5,5 и более дюймов во флагманских устройствах используется разрешение Quad HD (2650×1440). Качество изображение здесь высокое, но, если верить , человеческий глаз практически не в силах заметить существенную разницу. Quad HD — характеристика будущего, она необходимо для технологий дополненной и виртуальной реальности.

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

Обеспечивает доступное окно просмотра

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

Приветствую вас, случайные посетители и постоянные читатели блога сайт!

Некоторое время назад я обновил свой блог, создав с нуля полностью тему для wordpress. О том как это произошло я писал в статье » «. Одна из главных задач при создании нового шаблона — это адаптивная верстка сайта под все разрешения экрана.

Краткий план статьи:

Устанавливает содержимое в окно просмотра

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

Например, изображение, которое отображается с большей шириной, чем окно дисплея, может вызвать прокрутку последнего по горизонтали. Вы должны отрегулировать это содержимое, чтобы оно соответствовало ширине окна дисплея, так что пользователю не нужно прокручивать его по горизонтали. В качестве альтернативы рассмотрите использование значений относительной ширины, таких как ширина: 100%. Аналогичным образом, будьте осторожны с использованием больших значений абсолютного позиционирования; может сделать элемент из окна просмотра на небольших экранах.

В предыдущей статье я уже писал о том, и зачем он нужен. Но как достичь этой самой адаптивности?

Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ — это адаптивная с помощью CSS.

Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами

вставьте следующий код:

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

Применяет медиа-запросы к окну просмотра

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

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

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

Используйте любые указатели и любые зависания для гибких взаимодействий

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

Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

Но ведь этого не может быть!

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

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

Выбор контрольных точек

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

Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

Чтобы сделать адаптивную с помощью CSS, необходимо использовать media запросы.

Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

@media screen and (min-width: 1440px) and (max-width: 1599px){ }

Выбирает основные точки останова, начиная с малого, а затем расширяя диапазон

Вместо этого, в идеале, контент определяет, как дизайн вписывается в элемент контейнера.

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

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

Решение немного субъективно, но значение выше 600 пикселей, несомненно, является чрезмерной шириной.

Это код означает, что стили заключенные между «{ } » будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.

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

  • 320 px — Мобильные устройства (портретная ориентация);
  • 480 px — Мобильные устройства (альбомная ориентация);
  • 600 px — Небольшие планшеты;
  • 768 px — Планшеты (портретная ориентация);
  • 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
  • 1280 px и более — PC.

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

Принимает небольшие контрольные точки при необходимости

Чтобы вставить точку останова в 600 пикселей, создайте две таблицы стилей; один, когда браузер имеет размер 600 пикселей вперед, а другой, когда ширина превышает этот размер. В дополнение к выбору больших точек останова при значительном изменении дизайна, также будет полезно применить корректировки для незначительных изменений. Например, между основными точками останова может быть полезно настроить поля или отступы в элементе или увеличить размер шрифта, чтобы он стал более естественным в макете.

Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

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

Оптимизировать текст для чтения

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

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

Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:

Никогда полностью не скрывайте контент

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

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

Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

Чтобы просмотреть вашу страницу под разными точками останова. Наконец, откройте меню «Режим устройства» и выберите, чтобы показывать контрольные точки в виде цветных полосок на вашей странице. Нажмите на один из столбцов, чтобы увидеть свою страницу, пока этот мультимедийный запрос активен. Щелкните правой кнопкой мыши панель, чтобы перейти к определению запросов к мультимедиа. Дополнительную помощь. Эта информация означает, что поведение веб-серферов по отношению к просмотру веб-страниц меняется, и это, очевидно, в конечном итоге отражается на онлайн-среде в целом.

Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

Если разобраться, то работа с бутстрап делает работу с очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.

В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую , чтобы не упустить этот момент.

Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.

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

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

Адаптивные дизайны (responsive designs) адаптируются к разным размерам экрана, для обеспечения подходящего отображения для различных видов устройств, таких как смартфоны или планшеты.

При создании адаптивного дизайна важно сначала определиться, на какие устройства и размеры экранов ориентирован разрабатываемый ресурс. Вы должны выбрать устройства для адаптивной верстки: компы, ноуты, планшеты и телефоны. Кроме этого, в пределах диапазонов ширины экранов для каждого из выбранного класса устройств вы должны определить, как будет работать адаптивная верстка – какие разрешения учитывать, а какие пропустить. Существует довольно большое многообразие возможных форматов экранов для каждого из видов устройств, но это не значит, что вы должны использовать их все. Можно выбрать лишь несколько наиболее распространённых форматов экранов для адаптивной вёрстки.

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

Смартфоны (Портрет и ландшафтный)

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

Смартфоны (ландшафтный)

@media only screen and (min-width : 321px) {}

Смартфоны (portrait)

@media only screen and (max-width : 320px) {}

iPads (Портрет и Ландшафтный)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

iPads (Ландшафтный)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

iPads (Портрет)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

Настольные компьютеры и ноутбуки

@media only screen and (min-width : 1224px) {}

Большие экраны

@media only screen and (min-width : 1824px) {}

iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {}

Для тестирования разрабатываемого ресурса можно воспользоваться онлайн-сервисами:

http://mattkersley.com
http://www.responsinator.com

Пояснение

  1. @media only screen — только для экранов монитора;
  2. min-width — условие «истина», когда ширина окна браузера больше установленного значения;
  3. max-width — условие «истина», когда ширина окна браузера наоборот меньше установленного значения;
  4. min-device-width — условие «истина», когда размер экрана устройства больше установленного значения;
  5. max-device-width — условие «истина», когда размер экрана устройства меньше установленного значения;

С каждым годом трафик с мобильных устройств растет и со временем превысит его. Уже сейчас, одним из требованием в ТЗ на разработку сайта является адаптивный дизайн под разные типы устройств. Поэтому до сборки сайта нужно подумать о представлении контента таким образом, чтобы он был ориентирован и на мобильную аудиторию.

Адаптивные дизайны (responsive designs) адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты.

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

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

Для тестирования разрабатываемого сайта можно воспользоваться web-сервисами:

  1. http://mattkersley.com
  2. http://www.responsinator.com

Под какие разрешения рисовать адаптивный дизайн?

При рисовании любого дизайна встает техническая задача — уместить элементы сайта в указанную ширину. Уместить в заданную ширину тяжелее, чем растянуть до заданной ширины. Растянуть легко на этапе верстки. Поэтому нужно ориентироваться на минимальную ширину в классе.
1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).
2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.
3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.
В принципе, этого достаточно, чтобы верстальщик справился.
Если дизайн не имеет максимальной ширины и тянется от края до края окна браузера, то на усмотрение дизайнера можно нарисовать еще один или несколько эскизов для более широких экранов.
В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.
Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *