Например, пользователь открывает ваш сайт с помощью настольного ПК, разрешение экрана которого значительно больше, чем у смартфона, и ввиду наличия большого экрана мы можем отобразить веб-сайт с более высоким разрешением, растянув элементы на странице. Если же посетитель использует смартфон, то размер экрана ограничен, и поэтому нам нужно немного перестроить элементы, чтобы они идеально вписались под используемое разрешение.
В нашей сегодняшней статье мы расскажем вам о media queries, предоставим вам отрывок кода, который можно использовать для внедрения технологии media queries, а также покажем вам процесс комбинирования переходов в CSS с media queries, что позволит вам красивым образом отображать перестройку элементов в виде анимации.
Что же такое Media Queries
CSS3 предлагает нам много новый функций, которые можно использовать в веб-дизайнах, и одна из этих функций может сильно помочь нам в реализации удобного функционала нашего сайта. Сегодня речь пойдет о Media Queries.
Media Queries используются для определения максимального разрешения экрана устройства пользователя, и позволяет вам применять разные CSS-стили, кроме основного использующегося. Данную технологию прозвали «адаптивный дизайн», который подстраивается под разрешение экрана устройства, которое использует посетитель вашего сайта.
В прошлом единственный метод, посредством которого мы могли хоть как-то адаптировать веб-сайт под разрешение, заключался в разработке гибкого каркаса дизайна, но media queries позволяют нам делать гораздо больше. С помощью media queries вы можете скрыть боковую панель на странице, если она открывается с экрана с маленьким разрешением. Это позволит вам отобразить важный контент, и даже увеличить размер шрифтов, используемых на странице. Всё это было невозможно во времена гибких каркасов.
Альтернативы Media Queries
Если нам нужно, чтобы веб-сайт корректно отображался на всех экранах устройств, которые используют посетители, но не хотим применять Media Queries, что нам делать тогда?
Мы можем использовать мобильные приложения – отличное решение, в рамках которого вы сможете создавать красивые приложения, которые способны даже оповещать пользователей, если контент на сайте был обновлен. Проблема здесь заключается в том, что для этого требуется гораздо больше ресурсов на разработку приложения, в отличие от того, когда мы просто используем Media Queries. Здесь также существует проблема разных операционных систем, установленных в устройствах. Если вы захотите разработать приложение, то вам придется разрабатывать сразу несколько версий, чтобы они корректно работали (да и вообще просто работали) на iOS, Android, Windows Mobile, Blackberry и т.д. 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;
}
}Заключение
Именно таким образом вы сможете облагородить процесс перестройки элементов на странице при открытии веб-сайта с мобильных устройств. Главная идея во всем этом заключается в том, что это просто выглядит опрятно и красиво, если кто-то вдруг вздумает изменить размер окошка браузера или когда кто-то заходит на ваш сайт через мобильные устройства, а вы как дизайнер заработаете себе репутацию.
Конечно же, вряд ли кто-то специально посещает сайты, чтобы изменить размер окошка браузера, поэтому самой важной причиной здесь можно выделить необходимость корректного отображения веб-сайта на экранах мобильных устройств. Теперь вы не просто можете предложить посетителям корректное отображение вашего сайта, но и приукрасить эффект перестройки посредством анимации.
Если у вас будут примеры, которые вы хотели бы показать нам, обязательно воспользуйтесь формой для комментариев!
