У меня есть стандартный веб-сайт, который содержит навигационную часть вниз по странице. Если изменить размер до 980px, начнется медиа-запрос, и навигацию необходимо изменить внешний вид (легко), но также изменить позицию в DOM, чтобы она находилась в верхней части страницы. Я не могу использовать CSS-позиционирование для этого, поскольку он просто не сработает.Лучший подход для переупорядочения DOM в соответствии с размером экрана
На данный момент я играю с креплениями некоторые JQuery логику загрузки страницы/размер/изменение ориентации события, как это:
var mobileBreakPoint = 980;
$(window).bind('load resize orientationchange', function() {
if ($(window).width() <= mobileBreakPoint) {
$('.primary').insertAfter('.new-placeholder');
} else {
$('.primary').insertAfter('.original-placeholder');
}
});
Однако, во-первых, я не уверен, что с помощью JavaScript для перемещения достаточно большие куски HTML вокруг страницы - хорошая идея с точки зрения производительности (имея в виду, что этот сайт, как ожидается, хорошо работает на мобильном телефоне, следовательно, медиа-запросы!); и, во-вторых, мой код выше должен будет использовать что-то вроде jQuery '.on()', чтобы переместить структуру DOM обратно в исходное положение, иначе он больше не распознает селектор после его перемещения, что, похоже, добавьте довольно значительную нагрузку на обработку.
Я задавался вопросом, есть ли у кого-нибудь хорошие идеи по этому поводу? Это лучший способ продвижения вперед? Должен ли я перестать беспокоиться о производительности или просто дважды переместить навигацию и использовать CSS для отображения/скрыть разные версии?
Полагаю, что для такого рода вещей может быть очень передний край CSS3, но мне нужно поддержать его до IE7, так что, вероятно, это не вариант.
Большое спасибо.