Как делают Responsive сайты?

Question

[frontend-noob]

Приступил к изучению методик построения Responsive Сайтов ( bootstrap, media query, flexbox, css grids, падинги в процентах,rem,em)
Как к этому всему подступится, есть ли какие-нибудь туториалы, которые объясняли бы все эти способы на примере ?

Comments

[kepo]

падинги в процентах

Это что за извращение?

[frontend-noob]

а как еще делать резиновый сайт?

[frontend-noob]

MaxKorz: ну чтоб когда сайт ресайзился падинги тоже менялись (были резиновыми)

[kepo]

frontend-noob: em, rem

[Иван]

kepo: может быть он имел ввиду маржины в процентах?

[kepo]

Иван: какая разница?

[Boris Köln]

Наверное, имеется ввиду, что отступы надо делать относительными, а не абсолютными. А вот относительно чего - это другой вопрос. Можно от размера шрифта (em). Но лучше от размера экрана, вот только не линейно (%), а обычно для 4 диапазонов размеров экрана с помощью @media (max-width: 767px) {}

Answer 1

[iBird Rose]

есть ли какие-нибудь туториалы, которые объясняли бы все эти способы на примере ?

ага. вот все, что ты перечислил - отдельным запросом в гугле вводи и смотри

Comments

[frontend-noob]

но это все разные технологии, которые выполняют одну задачу, что из них выбрать для построения сайта ???

[frontend-noob]

MaxKorz: так где же его набраться

[Kovalsky]

frontend-noob: например есть сайты где можно скачать PSD макеты для верстки. Я таким не пользуюсь, так что не смогу сказать наверняка какие там хорошие, а какие - нет. Ходят слухи, что особо крутые парни верстают прямо с html5up

Answer 2

[Сергей Нижний Новгород]

Привет.

Я делаю просто:

1) Foundation - grid (аналог Boostrap, используется чаще всего в США).

2) media query

3) Понимание бизнес-логики (что скрыть, что показать, что увеличить итд при ресайзах).

Чем больше верстаю, тем очевидней становится, что какие-то вещи удобней делать на чистом css, нежели подключать какие-то сторонние либы.

Comments

[kepo]

Foundation - grid (аналог Boostrap, используется чаще всего в США)

Есть статистика? Или это просто приснилось?

[kepo]

Понимание бизнес-логики (что скрыть, что показать, что увеличить итд при ресайзах)

Вот это я понимаю "бизнес логика", лол.

Answer 3

[Иван]

Как верстать адаптивно с нуля?