Как верстать блоки на абсолюте и при этом сделать отличную адаптивку?

Question

[semenvachekin]

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

Comments

[roswell]

Гугли про 'css responsive layout' и bootstrap, что ли.

[Алекс Глебов]

Это не абсолют а обычный поток
блоки двигаются анимацией gsap или вроде этого

если элементы сложные то проще будет сначала заверстать мобильную версию, потом десктоп
mobile first

[dom1n1k]

Из картинок неясно, в чем конкретно проблема? Ну да, макет не назовешь простым, но что именно вызывает затруднение? Что и как там должно адаптироваться? Думаю, вариантов решения будет несколько, и однозначно предпочесть какой-то один нельзя. Нужно будет смотреть по ситуации и требованиям.

[alex]

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

[lloydbanks]

сам верстальщик но не могу догнать уровень тех сайтов которые сейчас.

Не можете догнать, потому что не знаете ничего кроме html и css. Все "красивые" сайты делаются с помощью JavaScript. Даже если там и сверстано все абсолютом (что врядли) это "все" высчитывается динамически.

Дайте советы про верстальщики, может курсы либо видео есть на данную тематику

Учите JS и сопутствующие библиотеки по работе с анимацией типо GSAP, а не сраную верстку.

[semenvachekin]

Алекс Глебов, ок

[semenvachekin]

lloydbanks, а какие библиотеки например. От js?

[semenvachekin]

lloydbanks, gsap это анимации, как он влияет на вёрстку?

Answer 1

[Андрей]

google -> как сделать адаптивный сайт
вот простейший прототип https://jsfiddle.net/svistiboshka/bscz68pn/4/

Comments

[semenvachekin]

А вот именно элементы допустим иконки, либо текст и т.д это же не сетка а абсолютом верстают на таких макетах

[Андрей]

покажите пример. все сводится к тому что я написал

[semenvachekin]

Андрей, так сейчас прикреплю

[semenvachekin]

все прикрепил

[Андрей]

semenvachekin, ну тоже самое. просто переписываете стили элемента по достижению ширины браузера

@media (min-width: 500px) {
.aside {
   width: 20%;
}
}

это значит, что при ширине браузера 500px и выше ширина контейнера .aside становится равна 20%

[semenvachekin]

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

[Андрей]

semenvachekin, без разницы можно max-width тогда будет регрессиваная

Answer 2

[Иван Бобров]

Приветствую. Мой совет, верстать с использование flex-контейнеров, либо использовать фреймворки (bootstrap, foundation). Изучайте соответствующую документацию - всё наглядно и подробно расписано.
https://developer.mozilla.org/ru/docs/Learn/CSS/CS...
http://bootstrap-4.ru;
https://foundation.zurb.com

Comments

[semenvachekin]

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

Answer 3

[Илья Молчанов]

Читай про адаптивную и резиновую верстку и media queries css. Изучив это, вопросы отпадут.

Answer 4

[Александр Алексеев]

задавайте все размеры в процентах