Как можно сделать адаптив без Flex или Grid?

Question

[vlurtex]

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

Comments

[Сергей delphinpro]

ну раньше, до появления flex и grid, как-то делали =)
И по большому счету принципы не изменились, только возможности поменялись на более удобные.

(Требования очень странные).

[Lynn «Кофеман»]

Flex и grid это чистейший CSS. Так что кто-то или упоролся или чего-то умолчал

[vlurtex]

Сергей delphinpro, я понимаю, что странные, но ничего не поделать
Есть какая-нибудь инфа по этому(адаптив без f g)? Я всегда делал адаптив через флексы и гриды, а с таким не сталкивался

[Danny Arty]

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

Флексы и гриды - это чистый CSS. Еще и без псевдоэлементов...
Что за тупое создание придумывает такие задачи? Типа чему они учат? Верстка в экстремальных ситуациях?

[RAX7]

vlurtex, верстка email писем или требование совместимости с Netscape Navigator v0.01-alpha?

[Даниил]

Почитал, комменты, посмеялся. Но, все же стоит сказать своему руководителю, что нюхать всякие разные вещества на работе нельзя. Flex, Grid - чистый css, такой же как псевдоэлементы. А если он настолько упоролся, то до флексов была табличная верстка.

[vlurtex]

RAX7, неа, обычный лендинг информационный с парой статеек и простой анимашкой

[RAX7]

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

[mletov]

А media query тоже в "и т д" входит?

[Антон Литвиненко]

делаете мобильнуюю версию и вуаля.
ваше задание больше напоминает тестовое задание на смекалку.
когда я начинал верстать юзали флоаты, а псевдоэлементы не юзали. главное чтобы вам не запретили media использовать - тогда было бы совсем тупо

[Ankhena]

Требования смешные, конечно.

Вам никто не мешает использовать препроцессор и потом отдать готовую папку с билдом. И никто и не узнает, был там препроцессор или нет.

На счет флексов и гридов... можно тихонько спросить почему такое требование или просто послать заказчика как можно быстрее. Можно молча сверстать флексами и гридами, рассчитывая на то, что они всё равно не распознают.

Если эти варианты не подходят, то верстайте обычными инлайн блоками и @media. Ничего страшного.

[cssfish]

не гладя макеты, сказать вообще ничего тут нельзя.
может там там ваш adaptive банальной резиной решается и все.
А если нет, то сетка на инлайн-блоках (как самая прогрессивная в до-флексовую эру)

Answer 1

[Дима Паутов]

Раньше верстали через float: left. До этого были таблицы. Это единственный способ сделать адаптивность, если не брать гриды и флексы. Есть ещё возможность через inline-block, но там есть свои особенности.

Но на них больше никто не делает, поэтому требование очень странное.
Если не шарите за фолаты, то вот вам ссылка на старые версии bootstrap да бы изучить процесс

Comments

[Вадим]

Это единственный способ сделать адаптивность,

Абсолюты вышли из чата)

[Дима Паутов]

Вадим, не знаю, как вы собрались верстать весь сайт через абсолюты, но видимо за 8 лет я чего-то не знаю

[Вадим]

Дима Паутов, О да, месье, Вы явно недостаточно искушённый в извращениях)

P.s. визуальные редакторы, привет Dreamweaver, не редко выдавали вёрстку на абсолютах. Ничего, по факту, не мешает сделать адаптив на абсолютах. То, что не будет резиновым, это да.

[Дима Паутов]

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

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

[Вадим]

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

[Ankhena]

А просто display table, без тега table? Это если к справедливости.

Я, правда, не уверена, что это понравится работодателю ))

Дима Паутов,

не знаю, как вы собрались верстать весь сайт через абсолюты

Ко мне как-то приходил на собеседование персонаж. Назвался фронтом. Сказал, что 4 года верстает только на абсолютах. Удивился почему все радуются флексам и гридам.