4

レスポンシブデザインのウェブサイトを作成しています。

基本的に、ビューポートが XI よりも低い場合、ページの下部にメニューを表示したいと考えています。

例 リンク切れ - 私が所有していないサイト

ブラウザー ウィンドウのサイズを変更すると、3 つの異なるデザインに気付くでしょう (デバイスの種類ではなく、最終目標のデザインに基づく)

V1: 999px 以上、左上に赤いボックス、赤いボックスの隣に青いボックスが表示されます。

V2: 600px から 999px の間で、赤いボックスが小さくなり、青いボックスが赤いボックスの下に配置されます。

v3: 600px 未満。赤いボックスが小さくなり、青いボックスが黄色になっていることがわかります。

基本的に、V3 では、現在黄色のボックスを作成し、緑色のボックスの下、灰色のボックスの上に配置したいと考えています。

赤い箱 緑の箱 黄色い箱 灰色の箱

厄介な hide old div 以外に、show new div hack (テクニック) または JS バージョン (CSS Responsive から離れます) を移動する方法はありますか。

CSS はファイル内にあるため、ソースを表示するとすべてが表示されます。

乾杯

4

9 に答える 9

12

正直なところ、CSS だけでこれを行う方法は思いつきませんが、レスポンシブ デザインを壊すことなく jQuery で簡単に実行できます。#top-links div から margin-top を削除する以外は、CSS を変更する必要はありません。

    <script type="text/javascript">
$(document).load($(window).bind("resize", listenWidth));

    function listenWidth( e ) {
        if($(window).width()<600)
        {
            $("#topLinks").remove().insertAfter($("#content"));
        } else {
            $("#topLinks").remove().insertBefore($("#content"));
        }
    }
</script>
于 2012-10-17T12:00:39.583 に答える
5

からのソリューションを実装しました

http://www.jtudsbury.com/thoughts/rearrange-div-order.php

display: table-header-group;と_display: table-footer-group;

これは、ウィンドウ幅の縮小時に左ボックスの真上に切り替わる 2 つの水平 50% 幅ボックスの例です。

.box-container {
    display: table;
}

.box-50 {
    width: 50%;
    display: table-cell;
    padding: 0 20px;
}

@media only screen and (max-width : 700px) {

    .box-container {
        display: block;
    }
    .box-50 {
        display: block;
        width: 100%;
    }


    /* http://www.jtudsbury.com/thoughts/rearrange-div-order.php */
    .box-50.left {
        display: table-footer-group;
    }

    .box-50.right {
        display: table-header-group;
    }

}
于 2015-01-09T13:03:20.517 に答える
2

これを試してみてください

    @media (min-width:1px) and (max-width:599px) {
        #pageFrame {
            width:100%;

        }
        #logo {
            margin:0 auto;
            width:50px;
            height:50px;
        }
        #topLinks {
            position:absolute;
             top:250px;
            float:right;
            width:100%;
            background-color:yellow;

        }
        #content {
            position:absolute;
            top:100px;
            clear:none;
            float:left;
            width:100%;
        }
        #footer {
            position:absolute;
            top:350px;        
            clear:both;
            width:100%;
        }

デモ

于 2012-10-17T12:12:20.827 に答える
2

はい、コンテナー内の div の順序を変更するのは非常に簡単です。私の作業中の HTML css コードを見てください。

<html>
    <head>
        <style type="text/css">
            #nav_bar{
                width:100%;
                height:50px;
                background:red;
            }
            #container{
                width:100%;
                height:500px;
            }

            #left_panel {
                position:relative;
                float:left;
                width:250px;
                border:0px solid black;
                background:#ccc;
                height:100%;
            }
            #right_panel{
                width:100%;
                background:#666;
                height:100%;
            }
            #inner_container{
                height:100%;    
            }
            .center {
                margin-left: auto;
                margin-right: auto;
                width: 40%;
                padding-top:50px;
            }
            .data_container{
                border:1px solid black;
                float:left;
                position:relative;
                padding:10px;
            }
            #footer{
                width:100%;
                height:50px;
                background:blue;
            }
            @media all and (max-width: 700px) {
                #container {
                    width: 100%; 
                    height: 500px;
                    display: flex;
                    flex-flow: column-reverse ;
                }
                #left_panel {
                    width:100%;
                    height:200px;
                }
                #right_panel{
                    width:100%;
                    height:300px;
                }
            }
        </style>
    </head>
    <body>
        <div id="nav_bar">Nav</div>
        <div id="container">
            <div id="left_panel">
                <div class="center">
                    Left Panel content
                </div>
            </div>
            <div id="right_panel">
                <div id="inner_container" class="center">
                    <div class="data_container">
                        Action Item 1
                    </div>
                    <div class="data_container">
                        Action Item 2
                    </div>
                    <div class="data_container">
                        Action Item 3
                    </div>
                </div>
            </div>  
        </div>
        <div id="footer">Footer</div>
    </body>
</html>
于 2014-11-22T09:59:47.240 に答える
1

フッターに 1 つ、ヘッダーに 1 つ、「display:none」という 2 つの div を作成してみてください。

于 2014-08-20T08:31:41.330 に答える
0

EventListener と matchMedia を使用:

 //on load
 responsive_change_box_order();
 //on resize
 window.addEventListener('resize', responsive_change_box_order );

 function responsive_change_box_order() {
       if (window.matchMedia("(max-width: 1118px)").matches) {
           jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content"));
       }
       else{
           jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner"));
       }
   }
于 2015-07-24T10:49:05.673 に答える
0

directioncss プロパティ を確認する必要があります。https://developer.mozilla.org/en-US/docs/Web/CSS/direction

あなたができることは次のとおりです。

  1. direction: rtl;親コンテナで：.container { direction: rtl; }
  2. 直接の子で通常にリセットします。.container > * { direction: ltr; }
  3. HTML の div の順序を変更して、デスクトップ バージョンで正しい順序で表示されるようにします

そして、これはすべてのブラウザで機能しているため、このプロパティはどこでもサポートされています（IE 5.5以降...）。

于 2015-06-24T12:51:23.607 に答える
0

Bootstrap 4 を使用している場合は、現在のメディア クエリのブレークポイントを確認し、それを変数として設定する単純なプラグインを作成しました。

その後、次のようなことができます

  if ( xs == true ) { 
    $("#topLinks").remove().insertAfter($("#content"));
  }

ここから入手できます: https://jacoblett.github.io/IfBreakpoint/

于 2017-09-22T20:02:30.960 に答える