web-dev-qa-db-ja.com

レスポンシブWebデザインのためのDOM内の要素の移動

簡単な説明

私は効果的に3つのビュー（デスクトップ、タブレット、モバイル）を持つレスポンシブWebサイトを作成しました。ほとんどのデザインは、CSSを介してメディアクエリを使用して変更されます（レスポンシブなWebサイトの場合と同様）。ただし、実際にはHTMLをDOM内で移動する必要があるため、デザインの一部が複雑すぎてCSSで簡単に操作できません。私はこれはそれほど素晴らしい音ではないことを知っていますが、HTML内の特定の要素を移動せずにこのデザインを複製することを他にどのように意図しているのかわかりません。

したがって、上記を念頭に置いて、さまざまな「レスポンシブビュー」ごとにカスタムイベントを作成する関数を作成する予定です。各イベントが（CSSメディアクエリと同期して）起動されると、JavaScriptを実行して、CSSを使用して十分に操作できない要素を移動/アニメーション化します。

私の質問

これはこれを行うのに最適な方法ですか？そうでない場合、他にどのようなオプションがありますか？見て、学ぶことができる既存のライブラリはありますか？

私の実際の質問は、レスポンシブWebデザインのDOMで要素を移動する最良の方法は何ですか？

さらなる説明

上記が明確でない場合は、以下をお読みください。

次の3つの異なるビューを検討してください。

Responsive Views

ここで、最初の2つのビューのコードを検討します。

デスクトップ

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

タブレット

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

navタグがpタグの下に移動したことに注意してください...

javascriptjqueryhtmlcssresponsive-design
25
Ben Carey

あなたはこれを試すことができます：

この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;
    }
}

中央の例

これは基本的に、画面サイズに応じて、2つのナビゲーションセクションのどちらを表示するかを切り替えます。ソースにhtmlが重複するという欠点があります（データ量の違いはごくわずかです）が、効果を得るのにJavaScriptは必要ありません。JSが無効になっているデバイスにはulが1つだけ表示されます。

この方法の優れた点は、非常にスケーラブルであることです。別のページでこの「効果」が必要ですか？ [u] that [/ u]ページを編集するだけで済みます。 JavaScriptをいじったり、新しいクラスやケースをハードコーディングしたりする必要はありません。

5
Cerbrus

.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
    }
}
5
David

Enquire.jsライブラリは、CSSメディアクエリに応答してJS関数を起動できるようにすることでこの問題を解決します。したがって、さまざまな画面サイズに応じてdetach（）およびappend（）ロジックを実行できます。ブートするのに軽量です。

参照： http://wicky.nillia.ms/enquire.js/

4
jasperjohnny

appendTo のような多くのメソッドがあります

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

レスポンシブデザインの課題を解決するために複製コンテンツを作成することは、ベストプラクティスではありません。マークアップの維持が難しくなります（特に、別の開発者がプロ​​ジェクトを引き継ぎ、複数の場所で更新する必要があることに気付かない場合）、ファイルサイズが増加します（ファイルサイズが重要でなかった場合、 CSS/JSまたはGZIP（HTML）を縮小します）、およびCSSを考慮に入れていない支援技術やその他のWebエージェントは、繰り返しコンテンツと見なします。

面倒くさいだけで、誰がそれをベストプラクティスと見なすかはわかりません。

JavaScriptも理想的ではありませんが、プログレッシブエンハンスメントの形式として使用されても問題はありません。私は最近それを頻繁に使用しているので、そのためのjQueryプラグインを作成しました： https://github.com/thomashigginbotham/responsive-dom

使用例：

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

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

私はちょうどこれを行うjQueryプラグインを書いたばかりです、見てください here 。基本的には、行と列の観点から一連のレイアウトを自動的に構築し、上に示したようにさまざまなビューに使用されます

0
James Ellis-Jones

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」内にある場合のみです

よろしく...

0
Johnattan Tibocha

私は今、ナビゲーションでこれを正確に行っています。デスクトップのヘッダーに移動し、モバイルのハンバーガーメニューのヘッダーのすぐ下に移動する必要があります。画面サイズをチェックしてtoggleNavigation関数に渡す関数を呼び出す、サイズ変更中のウィンドウにイベントリスナーがあります。リストされていないcheckBreakPointで呼び出される関数の他にいくつかの関数があるので、これは別のものです。次に、それが私のdomを常に移動したり再追加したりしないことを確認するために、最初にそれがどの親コンテナーにあるかを確認し、その画面サイズで期待するコンテナーにない場合にのみ移動します。私のプロジェクトでは、外部依存関係がないことが必要なので、これはプレーン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);
        }
    }
}
0
crumdev