Как делали адаптивные сайты раньше не имея бутстрапа и готовых сеток?

Question

[freeman0204]

Вопрос может странный, но все же.
Как делали адаптивные сайты раньше не имея бутстрапа и готовых сеток как ниже? Имея только медиа запросы.
Какой есть вариант верстки сайта без готовых сеток и даже своих, а только на % и медиа запросах?
Сделал свою 12 колонную сетку:

.container .cols.col-1 {width: 8.33333333333%;}
.container .cols.col-2 {width: 16.666666667%;}
.container .cols.col-3 {width: 25%;}
.container .cols.col-4 {width: 33.333333333%;}
.container .cols.col-5 {width: 41.666666667%;}
.container .cols.col-6 {width: 50%;}
.container .cols.col-7 {width: 58.333333333%;}
.container .cols.col-8 {width: 66.666666667%;}
.container .cols.col-9 {width: 75%;}
.container .cols.col-10 {width: 83.333333333%;}
.container .cols.col-11 {width: 91.666666667%;}
.container .cols.col-12 {width: 100%;}

Comments

[freeman0204]

Александр А: Не совсем пойму о чем речь..)

[sergey]

Артур Черешнюк: а чем собственно медиа-запросы Вас не устраивают?

[freeman0204]

SM: Все устраивает, я не мог понять как правильно распределить место в % без готовой сетки и бутстапа. Дима Турков помог. Читайте ниже.

[sergey]

Артур Черешнюк: я то знаю, мне читать не нужно

Answer 1

[Сергей delphinpro]

Я и сейчас старые сайты (давно сверстанные) адаптирую самыми обычными медиазапросами.

пример (вымышленный :) ):

.menu {
   width: 500px;
  @media (max-width: $breakpoint) {
      width: 100px;
  }
}
.menu2 {
   width: 550px;
  @media (max-width: $breakpoint) {
      width: 150px;
  }
}

/* ... другие блоки верстки аналогично */

Пишу все условия отдельно в каждом блоке, так удобнее.
В конце пропускаю все через combine-mq чтобы объединить одинаковые медиа-запросы

Answer 2

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

Судя по css значениям, это самая простая сетка от бутстрапа))) и отличается только наименованием класса!

А если по делу, то раньше, когда не было сеток, никто не делал адаптивные сайта. Да и в сетке нет ничего магического, это просто удобная структура для расположения блоков. Просто тогда их еще не придумали. Либо делали через скрипты. Раньше были таблицы. А сетку придумали чуть после, для замены таблиц. Т.к. таблицы это не тот html тег для постраения структуры шаблона и в плане css не такой гибкий как div.

.cols.col-6 - можно заменить на .leftCol и rightCol, каждой дать ширину по 50% ну и флоат. Так и было.

Comments

[freeman0204]

Как я понял с сегодняшних ответов, такую шапку как в моего сайта на бутсрапе можно роспределить так.
screenshot.ru/d3f9b047579af9e0659ab7307cd446a4
Но я пока хочу сам сделать без сетки просто через%. Уже мозг взрывается. Вроде уже объясняли как но я никак не догоню, уже и делал 3 колонки по 33.33% но контент в них разный по длине и не понятно как быть? И с отступами как быть между колонками? Если не использовать бутсрап. Уже весь ютюб перешарил. Там верстают но только не адаптив а если адаптив то через бутсрап.

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

Артур Черешнюк: jsfiddle.net/4Lb0cao5

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

Артур Черешнюк: Адаптивный вариант jsfiddle.net/4Lb0cao5/1

[freeman0204]

Дима Турков: Большое спасибо, помогли) У меня была подобная идея, примерно такая screenshot.ru/8aa73f4731bbcdb6bff8483b56db732c сказали что ахинея и бред, даже пытался вычислять через calc() . Здесь подобно вашему просто более точно указаны %. Я так и не понял в чем ахинея? В том что числа не целые? Или в чем? Подход же очень схож с вашим. Суть в том что все в % даже отступы главное что бы в итоге была ширина 100%.

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

Артур Черешнюк: Ну да, ширина должна быть в сумме 100%. Просто такие числа, как у вас, сложней в будущем изменять!

[freeman0204]

Дима Турков: Т.е. можно не по сетке немного но задать целые числа, а в самом блоке уже паддингами тоже в % подогнать под макет? Как вариант будет нормально? Так делают?

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

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

[freeman0204]

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

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

Зависит от макета! Если макет построен не по сетке, то я лично допускаю маленькую оплошность в размерах, если элемент должен быть динамического размера. А если макет построен по сетке, то с точностью не должно быть проблем!

[freeman0204]

Дима Турков: она есть там 16 колонок. Но как по мне края элементов должны совпадать с линиями сетки а там такого нет. И не понятно зачем тогда ту сетку делали в этом макете...

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

Артур Черешнюк: Иногда, она в макетах для видимости!

Answer 3

[MarsFM]

Отзывчивый веб-дизайн
Итан Маркотт