Адаптивная верстка с помощью JavaScript. Как это делается?

Question

[colorkid]

Всем привет. Столкнулся с такой задачей, что есть интернет магазин и куча разных блоков, важной информацией и т.д (colorkid.ru/stolberi/). Все это дело нужно сделать адаптивным. И у меня начались проблемы...

При уменьшении экрана, я через appendChild переношу блоки по дереву и тут полная котовасия происходит. Мало того, что блоков которые нужно перенести накапливается куча и их опять же нужно возвращать в исходное положение при расширении экрана, но еще функция которая все это делает, срабатывает через раз. Реально! Функция вида

function f(){....}
window.onload = function() {
window.onresize = f;
f()
}

срабатывала через раз а то через 2. Т.е. при изменении экрана эта функция вызывала функцию f, которая все переносила элементы по dom, работала не стабильно.

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

А как у вас с этим делом? Вообще кто-нибудь пользуется JS что-бы сделать верстку адаптивно-резиновой? Где что почитать, как это делается по уму?

Answer 1

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

А зачем вы их все переносите? Зачем для адаптивной верстки js? Да, бывают моменты, когда он нужен. Но так, как используете его вы, не правильно. Почему вам через css все не делается?

Comments

[colorkid]

ну к примеру, мне нужно чтобы блок с баннером и виджетом вк, (в левом блоке .left-side) при уменьшении экрана все равно был, а блок .left-side приходиться скрывать, на его место встает .right-side(100%), соответсвенно, я беру appendChild и переношу блок с баннером и виджетом вк из left-side в right-side, при уменьшении экрана. Например.
Сейчас то я плюнул и это блок просто display none, но хотелось бы без этого.

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

colorkid: Ну так в чем проблема? Напишите функцию с 2мя параметрами, сам элемент и в какой его вставить. У вас на сайте подключен jQuery. Зачем вы используете нативные функции? jQuery вы сэкономите кучу времени

[Павел]

colorkid: посмотрите как в бутсрапе сделаны колонки push и pull, скопируйте такой подход себе. Я понял, вы хотите что бы сайдбар был слева в десктопе, но снизу на мобилке? это все делается через css

Answer 2

[gleendo]

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

Так что не стоит извращаться с JS. Вся адаптивность делается с помощью CSS

Answer 3

[Иван]

Посмотрите статьи как делаются всякие Bootsrap сетки (не как пользоваться, а как реализовать).

Answer 4

[sazhyk]

Use Bootstrap, Luke!