Перемещение элементов в DOM для адаптивного веб-дизайна
A Краткое пояснение
Я создал отзывчивый веб-сайт, который эффективно имеет три представления (рабочий стол, планшет, мобильный). Большая часть дизайна изменяется с помощью CSS с использованием медиа-запросов (как и для сайтов с учетом интересов). Тем не менее, часть дизайна слишком сложна, чтобы просто манипулировать с помощью CSS, поскольку HTML действительно нужно перемещать по DOM. Я знаю, что это звучит не слишком хорошо, но я не могу понять, как еще я намерен реплицировать этот проект, не перемещая некоторые элементы внутри моего HTML.
Итак, с учетом вышеизложенного, теперь я планирую написать функцию, которая создает пользовательские события для каждого из разных "отзывчивых представлений". Когда каждое событие запускается (синхронизируется с запросами на мультимедиа CSS), он будет запускать некоторый Javascript для перемещения/анимирования любых элементов, которые невозможно манипулировать с помощью CSS.
Мой вопрос
Это лучший способ сделать это? Если нет, то какие у меня есть другие варианты? Есть ли существующие библиотеки, на которые я мог бы смотреть и учиться?
Мой вопрос: Каков наилучший способ перемещения элементов в DOM для адаптивного веб-дизайна?
Дальнейшее объяснение
Если вышеуказанное не было ясно, прочитайте следующее:
Рассмотрим эти три разных вида:
![Responsive Views]()
Теперь рассмотрим код для первых двух видов:
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
Это может привести к появлению целого нового набора проблем, но можете ли вы использовать позицию: абсолютную для элементов, которые нужно переместить, и переместить их вокруг страницы в зависимости от размера экрана?