Bootstrap или media?

Question

[Rashad]

Всем привет!

Я знаю то, что вопрос уже давно избитый и так далее, но все равно решил вернуться к нему.
Я уже умею качественно верстать страницы, а также могу использовать JS для разных анимаций. В общем сижу я и верстаю страницу и тут когда закончил надо делать адаптивную верстку. Зашел в интернет посмотреть на брейкпоинты для адаптива и понял, что их много: 576px, 768px, 992px, 1200px, 1680px, 1920px, 2560px, 3440px и 4К(3840px)
Я уверен что для качественной верстки брейкпоинтов понадобиться больше, но каждый раз сидеть прописывать медиа запросы для этого оочень нудная и долгая работа.
Так вот хочу услышать от вас совета лучше мучиться с медиа-запросами или для front-end'а лучше использовать сетку бутстрап. А может лучше бутстрап использовать для полного создания сайта, а не только для адаптива? Просто в бутстрапе все эти классы учить и запоминать довольно сложно, НО я готов!
В общем короткий вопрос: медиа-запросы vs Bootstrap(для адаптива) vs Bootstrap(для полного создания сайта(если можно по подробнее))?

P.S Если учить бутстрап для полного создания сайта я не против, есть много сил и желания учиться и развиваться!
Спасибо за советы!

Comments

[tempick]

я бы grid лучше использовал

[Сергей delphinpro]

В том же бутстрапе вы можете задать любой набор брикпойнтов. Можете взять оттуда только сетку. Делайте как удобно. Я, например, дернул из bs сетку и утилитарные миксины, вынес в отдельную репу и часто ее использую

Answer 1

[Justina666-2-0]

Привет!
В бутстрап тоже можно менять значения переменных для брейкпоинтов, добавлять свои и тд.

Какие брать значения, если дают дизайн для верстки, лучше уточнять у дизайнера, если принимаете совместно решение, нужно смотреть, потенциально с каких разрешений чаще всего заходят, и под них делать, чтоб хорошо вставало. Ну и если адаптив, по идее на всех разрешениях должно норм смотреться, обычно мне хватает 3-х брейкпоинтов, пару раз было 4, но это был очень злодолбичный дизайн с разными макетами под каждый и каждым элементом в разных местах (и одно разрешение под лично монитор гендира :-D), в общем это был ужас, среднестатистический дизайн обычно проще.

В бутстрап 4 пять брейкпоинтов: xs, sm, md, lg, xl, должно хватить. Обычно верстаю в бутстрапе, мне так проще из-за экономии времени, что уже под всякие ie и мобильники там есть стили. А так что там что там медиазапросы.

Comments

[Rashad]

Спасибо, только из вашего ответа все стало понятно!

Answer 2

[Андрей Чернов]

В большей части сайтов не нужно делать брейкпоинты 2560px, 3440px и 4К(3840px), особенно если делаете верстку Mobile First. Если будете начинать верстать сайты с мобильной версии, то меньше понадобится писать стилей, от этого сможете слегка увеличить скорость вёрстки.

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

Если, как пишите, вы уже хорошо знаете вёрстку, то Бутстрап выучить не составит труда. Нужно только выделить несколько дней.

Comments

[Rashad]

Хорошо, спасибо!

[Rashad]

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

[Андрей Чернов]

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

Заказчики будут попадаться разные. Некоторые на отрез будут отказываться от использования Бутстрапа, другим хотят только Бутстрап. Так что лучше уметь верстать обоими способами.

[Rashad]

Андрей Чернов, Постараюсь!

Answer 3

[archelon]

Чтобы нормально работать с бутстрапом, нужно понимать, как он устроен, и знание media-запросов это не отменяет.
Все перечисленные брейкпойнты чаще всего не нужны, в большинстве случаев достаточно 3 (мобильный, планшет, десктоп).

Answer 4

[Sanes]

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

Comments

[Rashad]

Далбаебсааан

Answer 5

[Евгений Скоробогатов]

Выбор зависит от дизайна и требований заказчика .. Дизайнер может не заморачиватся и нарисовать всё по сетке bootstrap .. может нарисовать и с использованием его элементов .. а может сделать так что bootstrap при всём желание нельзя использовать .. И заказчик может указать что можно что нельзя использовать и что использовать обязательно..

Ну и .. а почему или или .. использование botstrap не отменяет media оно просто делает некоторые моменты легче ..

Если учить бутстрап для полного создания сайта я не против, есть много сил и желания учиться и развиваться!

а еще учить sass БЭМ js flex & grid

Comments

[Rashad]

JS, Flex знаю
С SASS знаком

Answer 6

[asd111]

Делай как все. Статичный десктопный вариант и отдельно статичный мобильный на поддомене m. И возможно мобильное приложение.
не трать время на адаптивность - она никому не нужна а времени уходит много.

Comments

[Rashad]

А я не знал про такое. Разве крупные компании создают две разные странички на пк и мобильные устройства или как? Можно по подробнее, если не сложно

[Rashad]

А разве это не сложно верстать и для пк и для смартфонов?

[Rashad]

А еще я прочитал что созданием мобильной и пк версией занимались давно

[ThunderCat]

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

[granty]

Rashad, есть 3 способа адаптации сайта для мобильных устройств.

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

Адаптация с на m.поддомене - вполне себе нормальный способ, все крупные компании так делают:
m.ok.ru
https://m.vk.com/
https://m.habr.com/ru/all/
https://m.facebook.com/
https://m.youtube.com/
https://m.twitter.com/ -> https://mobile.twitter.com/

Яндекс делает мобильную версию в отдельной папке https://yandex.ru/m/ это тот же вариант адаптации с разными url

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

[Евгений Скоробогатов]

Это уже практически мобильное приложение.. со своим функционалом и заморочками ... мелкому и среднему сегменту это не выгодно .. ну или если требуется активное взаимодействие с пользователем ..

Answer 7

[Lord_Dantes]

Зашел в интернет посмотреть на брейкпоинты для адаптива и понял, что их много: 576px, 768px, 992px, 1200px, 1680px, 1920px, 2560px, 3440px и 4К(3840px)

Нет, ну не совсем так конечно. Я например использую до 992px (до планшетной версии), до 1200px(до версии нетбука) и там уже по выбору или надобности использую 1440 или 1920 но редко.

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

Ну как раз таки чем больше "брейкпоинтов" тем это показатель что твоя верстка плывет абсолютно везде. Я делал лендос на флексах где в адаптиве просто сдвигал блоки один под один и все было нормально и ничего не слетало. Если мы конечно говорим не про кастомный дизайн.

Так вот хочу услышать от вас совета лучше мучиться с медиа-запросами или для front-end'а лучше использовать сетку бутстрап.

Если бы верстали на флексах у вас бы не было такого вопроса, если на гридах темболее. Ибо там по свойствам и так понятно что флекси лучше бутстрапа.

Comments

[Rashad]

Просто не совсем ясно вот что, я верстаю на флексах и вроде бы выходит хорошо, но есть одно но: то что с изображениями все плохо. ВСЕ остальные элементы страницы легко адаптировать, но изображения не получается. Можете дать совет?

[Lord_Dantes]

Rashad, какие именно проблемы с изображениями?