1

Как адаптировать сайт под все мобильные устройства?

2 ответа 2

1

Для адаптации используют @media запросы CSS. Синтаксис такой:

@media(Условие){
стили
}

Например,

@media(max-width: 992px){
/*Стили, на устройствах с максимальной ширеной экрана 992 пикселя и меньше */
}
@media(max-width: 768px){
/*Стили, на устройствах с максимальной ширеной экрана 768 пикселей и меньше */ 
}

@media(max-width: 500px){
/*Стили, на устройствах с максимальной ширеной экрана 500 пикселей и меньше */
}

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

Еще стоит почитать про подходы к адаптивной верстке mobile-first и desktop-first. Сравнивают их во многих статьях, например, тут.

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

  1. Писать только один экземпляр медиа-запроса, как выше и в конце файла css, что не всегда удобно.
  2. Использовать сборщики с предустановленными плагинами, которые автоматизируют рутинные задачи верстки (подключение и конвертация шрифтов, сжатие картинок, группировка медиа-запросов, подстановка префиксов для разных браузеров). Я использую для этого сборку gulp с плагином gulp-group-css-media-queries и некоторыми другими. Хороший гайд по настройке найдите в ютубе, сборок тьма. Есть еще сборщик webpack, говорят он лучше, точно новее, но с ним не работал, так как привык к gulp.
1

Варианта по идее только 2. Вы можете использовать поддомен для сайта и на нем размещать отдельную версию сайта, созданную для удобного просмотра на смартфонах. Или же, более оптимальный и менее затратный вариант - вы используете для этих целей CSS. А именно - медиа запросы. Суть в том, что например, при ширине окна браузера < 400px, можно изменять нужные вам стили, скрыть какие-то блоки, например, скрывать боковые блоки меню. А при ширине окна > 800px - отображать элементы, которые рассчитаны на десктопную версию шаблона. Гуглите в сторону медиа запросов, это очень полезная и нужная вещь, если вы хотите создать сайт с адаптивным и отзывчивым шаблоном!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.