Как лучше сделать сайт адаптивным?

Question

[vadimstroganov]

Здравствуйте! Имеется 3-5 сайтов, у каждого в багаже по 3000-4000 строк в css.

Нужно их оптимизировать под мобильную версию(сделать адаптивными)

Подскажите, как лучше это сделать?
Сначала думал подключить bootstrap, но сказали, но сказали что это не лучшее решение

Answer 1

[Андрей Б.]

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

Answer 2

[Кирилл Пензин]

Не лучшее, правда. Там сложности с маленькими экранами,но решение тоже весьма эффективное. Поставьте его, а для самых маленьких экранов перепишите свои media-запросы. Также рекомендовал бы на SASS перевести, если ещё не сделали, много фишек удобных появится, учитывая объёмы и, видимо, сложность ваших стилей.
ИМХО, будет довольно просто.

Answer 3

[Артем Кирьянов]

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

Answer 4

[Юрий Ярош]

Тут всё сложно...
Нужно прикрутить сборку на gulp, с использованием csslint. Препроцессоры нужно использовать по шустрее, желательно postcss или stylus, sass/scss довольно медленные. ~4000 это очень много, ~1000-1500 потолок Нужно использовать относительные размерности, vmin, vmax, и rem, для осликов и iOS7 есть нормальные polyfill'ы. media-queries там тоже получаются довольно специфические, но все выводятся по формулам и оформляются в виде одного mixin'a. Одним из главных критериев качества разметки является количество div'ов на странице - уж больно сильно людей тянет на дикие раздувательства, но не зря же в html5 добавили тучу тэгов для упрощения структурирования контента, а для сss'a обычно достаточно селекторов из двух элементов, что бы не раздувать CSSOM и упростить рендер. Тестировать это всё дело можно в galen и browserstack.

Вообще вопрос QA в вёрстке сейчас довольно проблематичен - в постсоветском его почти нет, а всплывает чаще всего только во всяких забугорных lean стартапах, у которых есть деньги на наукоёмкие решения и их анализ.

Answer 5

[ummahusla]

Берешь Foundation Zurb как CSS framework, переносишь свой проект туда, меняя стили и добавляя пару классов там где grid. Это всё также делаешь на SASS и будет тебе чистый проект, который нормально работает на мобильном, таблетах и декстопе.

В документации от и до всё написано, по форм, навагации, табов, да вообще слайдеров, всего чего угодно.

Лично я перешел на foundation 3-4 месяца назад, когда устроился на новую работу. Ранее пилил всё на Bootstrap.

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

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

Я бы на твоем, месте очень задумался..

Answer 6

[zooks]

Переверстать все элементы заново с использованием старых стилей.