Перемещение элементов в DOM для адаптивного веб-дизайна

A Краткое пояснение

Я создал отзывчивый веб-сайт, который эффективно имеет три представления (рабочий стол, планшет, мобильный). Большая часть дизайна изменяется с помощью CSS с использованием медиа-запросов (как и для сайтов с учетом интересов). Тем не менее, часть дизайна слишком сложна, чтобы просто манипулировать с помощью CSS, поскольку HTML действительно нужно перемещать по DOM. Я знаю, что это звучит не слишком хорошо, но я не могу понять, как еще я намерен реплицировать этот проект, не перемещая некоторые элементы внутри моего HTML.

Итак, с учетом вышеизложенного, теперь я планирую написать функцию, которая создает пользовательские события для каждого из разных "отзывчивых представлений". Когда каждое событие запускается (синхронизируется с запросами на мультимедиа CSS), он будет запускать некоторый Javascript для перемещения/анимирования любых элементов, которые невозможно манипулировать с помощью CSS.

Мой вопрос

Это лучший способ сделать это? Если нет, то какие у меня есть другие варианты? Есть ли существующие библиотеки, на которые я мог бы смотреть и учиться?

Мой вопрос: Каков наилучший способ перемещения элементов в DOM для адаптивного веб-дизайна?

Дальнейшее объяснение

Если вышеуказанное не было ясно, прочитайте следующее:

Рассмотрим эти три разных вида:

Теперь рассмотрим код для первых двух видов:

Desktop

<div id="some_container">
    <nav>
        <ul>
        </ul>
    <nav>
    <p>Some Text</p>
    <!-- The rest of the content -->
</div>

Tablet

<div id="some_container">
    <p>Some Text</p>
    <nav>
        <ul>
        </ul>
    <nav>
    <!-- The rest of the content -->
</div>

Обратите внимание, что тег nav был перемещен ниже тега p...

Ответ 1

Вы можете попробовать это:

Предполагая этот HTML:

<div id="some_container">
    <nav id="n1">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </nav>
    <p>Some Text</p>
    <nav id="n2">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </nav>
</div>

Вам понадобится только следующее CSS:

#n1{
    display:none;
}

@media only screen 
and (min-width : 600px) {
    #n1{
        display:block;
    }
    #n2{
        display:none;
    }
}

Пример скрипки

Это в основном переключает, какой из двух разделов навигации вы видите, в зависимости от размера экрана. Он имеет недостаток дублирования HTML в вашем источнике (разница в количестве данных действительно незначительна), но вам не понадобится JavaScript, чтобы получить эффект, а на отключенных устройствах JS будет отображаться только один ul.

Самое замечательное в этом способе то, что он очень масштабируемый. Нужен этот "эффект" на другой странице? Вам нужно только отредактировать [u] эту [/u] страницу. Нет возни с JavaScript, жестко программируй новые классы/кейсы.

Ответ 2

Я предлагаю вам использовать .insertAfter() и .resize()/.ready() для перемещения элементов на основе размера страницы:

$(window).resize(){
    resize();
}

$(document).ready(){
    resize();
}

function resize(){
    if($(window).width() < 480)
    {
        //Mobile
        $("#some_container nav").insertAfter("#some_container p");
    }
    else if($(window).width() < 800)
    {
        //Tablet
        $("#some_container nav").insertAfter("#some_container p");
    }
    else
    {
        //Desktop
        //Leave original layout
    }
}

Ответ 3

Библиотека enquire.js решает эту проблему, позволяя запускать JS-функции в ответ на запросы мультимедиа CSS. Таким образом, вы можете запускать логику detach() и append() в соответствии с разными размерами экрана. Легко загружаться.

Смотрите: http://wicky.nillia.ms/enquire.js/

Ответ 4

Существует много методов, таких как appendTo

//check for the window width
if($(window).width() < 700){
  //append to the p  
  $('#some_container nav').appendTo('#some_container p');
}

Ответ 5

Создание дублированного контента для решения проблем с адаптивным дизайном не является лучшей практикой. Это упрощает работу над разметкой (особенно когда другой разработчик берет на себя проект и не понимает, что его нужно обновлять в нескольких местах), он увеличивает размер файла (если размер файла не был важен, мы бы не минимизировать наши CSS/JS или GZIP наш HTML), а также вспомогательные технологии и другие веб-агенты, которые не учитывают CSS, рассматривают его как повторяющийся контент.

Это просто грязно, и я не вижу, как кто-то считает это лучшей практикой.

Хотя JavaScript тоже не идеален, я не вижу проблемы, если он используется как форма прогрессивного улучшения. Недавно я часто использовал его, чтобы создать для него плагин jQuery: https://github.com/thomashigginbotham/responsive-dom

Использование образца:

var $mainNav = $('.main-nav');

$mainNav.responsiveDom({
    appendTo: '.sidebar',
    mediaQuery: '(min-width: 600px)'
});

Ответ 6

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

Ответ 7

Я делаю именно эту вещь прямо сейчас с навигацией, которую мне нужно переместить в заголовок для рабочего стола и чуть ниже заголовка для меню гамбургера на мобильном телефоне. У меня есть прослушиватель событий в изменяемом окне, который вызывает функцию, которая проверяет размер экрана и передает его в мою функцию toggleNavigation. У меня есть это отдельно, потому что у меня есть несколько других функций, кроме тех, которые вызываются в checkBreakPoint, которые не перечислены. Затем, чтобы удостовериться, что он не постоянно перемещает мой домен или повторно добавляет его, я сначала проверяю, в каком родительском контейнере он находится, и перемещаю его, только если он не находится в том, который я ожидаю для этого размера экрана. Мой проект требует, чтобы у него не было никаких внешних зависимостей, так что это просто делается на простом Javascript, а затем я использую медиазапросы для стилизации элементов на основе размера экрана.

var mainNav = document.getElementById('rww_main_nav'); //element I want to move
var tieredHeader = document.getElementById('rww_tiered_header'); //where it should be on mobile
var branding = document.getElementById('rww_branding'); //where it should be on desktop

window.addEventListener("resize", checkBreakPoint);

function checkBreakPoint() {
        //width of viewport
        var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        toggleNavLocation(w);
}

function toggleNavLocation(screensize) {
    if (screensize > 999) {
        if (mainNav.parentElement.id === 'rww_tiered_header') {
            branding.appendChild(mainNav);
        }
    } else {
        if (mainNav.parentElement.id === 'rww_branding') {
            tieredHeader.appendChild(mainNav);
        }
    }
}

Ответ 8

Если вы не хотите создавать JavaScript, используйте технику сетки.

<div class="main_container">
    <nav class="grid_nav">
        <ul>
        </ul>
    <nav>
    <div class="grid_text">
        <p>Some Text</p>
    </div>
    <!-- The rest of the content -->
</div>

.main_container{
  display: grid;
  @media screen and (max-width: 500px) { //mobile
    grid-template-rows:    1fr 1fr;
    grid-template-areas: "gridnav"
                         "gridtext";
  }
  @media screen and (min-width: 500px) {//web
    grid-template-rows:    1fr 1fr;
    grid-template-areas: "gridtext"
                         "gridnav";
  }
}

.grid_nav{
  grid-area: gridnav;
}
.grid_text{
  grid-area: gridtext;
}

Но только тогда, когда движения внутри "main_container"

С уважением...

Ответ 9

Это может привести к появлению целого нового набора проблем, но можете ли вы использовать позицию: абсолютную для элементов, которые нужно переместить, и переместить их вокруг страницы в зависимости от размера экрана?