—»     —»   CSS3-анимированные Media Queries
  Раздел: Web-дизайн, CSS/Style Sheets   Нет комментариев  

CSS3-анимированные Media Queries

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

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

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

Что же такое Media Queries

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

Media Queries используются для определения максимального разрешения экрана устройства пользователя, и позволяет вам применять разные CSS-стили, кроме основного использующегося. Данную технологию прозвали «адаптивный дизайн», который подстраивается под разрешение экрана устройства, которое использует посетитель вашего сайта.

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

Альтернативы Media Queries

Если нам нужно, чтобы веб-сайт корректно отображался на всех экранах устройств, которые используют посетители, но не хотим применять Media Queries, что нам делать тогда?

CSS3-анимированные Media Queries

Мы можем использовать мобильные приложения – отличное решение, в рамках которого вы сможете создавать красивые приложения, которые способны даже оповещать пользователей, если контент на сайте был обновлен. Проблема здесь заключается в том, что для этого требуется гораздо больше ресурсов на разработку приложения, в отличие от того, когда мы просто используем Media Queries. Здесь также существует проблема разных операционных систем, установленных в устройствах. Если вы захотите разработать приложение, то вам придется разрабатывать сразу несколько версий, чтобы они корректно работали (да и вообще просто работали) на iOS, Android, Windows Mobile, Blackberry и т.д. Media Queries, в свою очередь, способны адаптировать ваш сайт под любое устройство.

CSS3-анимированные Media Queries

Еще одна альтернатива заключается в применении jQuery Mobile. В данном случае мы разрабатываем HTML5-веб-сайт, который может корректно отображаться на большинстве популярных мобильных устройствах. Проблема здесь заключается в том, что поверх вашего сайта будет оперировать еще одна другая система.

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

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

Media Queries Boilerplate

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

/*Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Анимируем изменения в CSS-коде

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

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

/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;

/* moz */
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 1s;

/* opera */
-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 1s;

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

Веб-сайты с анимированными Media Queries

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















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

Как добавить анимацию в Media Queries

Выше в нашей статье мы предлагали вам 2 отрывка кода, один для Media Queries Boilerplate и второй для применения анимации к Media Queries. Теперь мы можем свести всё это воедино.

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

.main{
width:800px;
display:inline-block;
}
.sidebar{
width:300px;
display:inline-block;
}

/*Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
.main{
width:480px;
}
.sidebar{
width:480px;
}
}

Как видно по примеру сверху, у нас будет простенький шаблон, состоящий из основного div’а и div’а боковой панели, которые будут отображены рядом друг с другом на экранах настольного ПК, так как общая ширина в разрешении будет 1100 пикселей. Затем нам нужно изменить ширину данных элементов для отображения на смартфонах, так как им просто-напросто не хватит места на экране. Итак, мы изменяем ширину обоих элементов таким образом, чтобы она была 480 пикселей, и тогда они будут отображены друг над другом.

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

.main{
width:800px;
display:inline-block;
}
.sidebar{
width:300px;
display:inline-block;
}

/*Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
.main{
width:480px;
/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 3s;

/* moz */
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 3s;

/* opera */
-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 3s;
}
.sidebar{
width:480px;
/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 3s;

/* moz */
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 3s;

/* opera */
-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 3s;
}
}

Заключение

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

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

Если у вас будут примеры, которые вы хотели бы показать нам, обязательно воспользуйтесь формой для комментариев!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 12124   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Видеочат рулетка с девушками
Статья о том, как понравиться девушке. Подробности читайте на сайте
chatruletkaz.com
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Повышение квалификации пожарных
квалификации Пожарных
dpostolica.com







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июнь 2020    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
2930