С развитием веб технологий разработчикам сайтов приходится оптимизировать свои проекты под мобильные устройства, такие как планшеты и телефоны.
Раньше мобильные версии сайтов делались отдельно от основного сайта, например, на поддомене. Это было крайне неудобно, так как если нужно было бы что-то добавить или изменить, то приходилось это делать как в ПК версии, так и мобильной.
Сегодня технологии позволяют успешно реализовывать мобильные версии сразу на дизайне основного сайта. Делается это в основном за счет CSS правил. Рассмотрим подробнее.
Чтобы ваш сайт адаптировался под мобильники, вставьте между тегами <head> такую строку: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">. Она позволит адаптировать ширину сайта под ширину телефона.
Теперь рассмотрим градации телефонов и мобильников по ширине экрана. Согласно стандарту bootstrap 3 есть следующие правила. Если ширина экрана:
От 1199px и больше - стандартный ПК монитор
От 992px и больше - экран ПК или ноутбука
От 767px и больше - экран планшета
От 480px и больше - экран маленького планшета и телефонов
От 320px и больше - экран телефонов в вертикальной раскладке.
Согласно этим данным нам нужно создать css правила для всех категорий мобильных устройств.
Как создавать мобильные версии?
Создайте и подключите в теме дизайна новый css, например: mobile.css. Он должен подключаться последнем по счету.
В вашем css-е пропишите следующие правила:
@media (max-width: 1199px) {
/* 970 */
}
@media (max-width: 992px) {
/* 750 */
}
@media (max-width: 767px) {
/* 100% */
}
@media (max-width: 480px) {
/* 100% */
}
@media (max-width: 320px) {
/* 100% */
}
Эти media правила будут подключать стили, которые вы в них пропишите только в том, случае, если ширина экрана будет соответствовать их условиям. В комментариях, я указал рекомендуемую ширину рабочей области сайта. Например, /* 970 */ означает, что если экран у пользователя 1024px, то ширина сайта должна быть 970px.
Рассмотрим легкий пример
Предположим есть такой стиль
@media (max-width: 992px) {
.main {width: 750px; margin:auto;}
}
@media (max-width: 767px) {
.main {width: 100%; margin:auto;}
}
Он означает, что если пользователь зайдет с планшета в горизонтальной раскладке, у которого ширина экрана меньше 992px, то к сайту применются все css стили на 992, но если он перевернет планшет, то тогда добавятся css правила на 767px, которые будут перебивать правила на 992px.
По такому или аналогичному способу за счет media запросов и создаются мобильные версии сайтов.
