5

Zurb Foundation 3 でサイトのプロトタイプを作成しました。これまではデスクトップ バージョンを使用していましたが、現在はタブレットとモバイルで使用できるように調整しています。

私が苦労しているのは次のとおりです。コンテンツが並んでいる列がいくつかあり、中および小の解像度の列の一部を削除したいと考えています。しかし、他の列をページ幅の残りの部分まで拡大したいと考えています。これを正しく行うにはどうすればよいですか?

私は使っている

class="hide-for-medium-down"

要素を非表示にしますが、一部の要素が非表示になっているときにコンテンツが伸びるようにコンテンツをラップするにはどうすればよいですか?

私は2つの方法を見つけましたが、どれも機能しません:1)標準の行-列として作成します。

<div class="row">
    <div class="three columns">...</div>
    <div class="three columns">...</div>
    <div class="three columns hide-for-medium-down">...</div>
    <div class="three columns">...</div>
</div>

ただし、この場合、3 番目の列は空白のままになります。

2) 次のようにブロック グリッドを使用して作成できます。

<ul class="block-grid four-up">
    <li>1</li>
    <li>2</li>
    <li class="hide-for-medium-down">3</li>
    <li>4</li>
</ul>

しかし、今回は 4 番目の列が 3 番目の位置まで左に移動し、4 番目のスペースは再び空のままになります。

私が得た最も近いものは、mobile-x-upクラスを使用してグリッドを調整し、モバイルの列が少なくなるようにすることでした-このように：

<ul class="block-grid four-up mobile-three-up">
    <li>1</li>
    <li>2</li>
    <li class="hide-for-medium-down">3</li>
    <li>4</li>
</ul>

残念ながら、これはモバイルでのみ機能しますが、これに相当するものがないため、中解像度のタブレットでも使用できません.

したがって、全体的な私の質問は次のとおりです。これを解決する最良の方法は何ですか? また、グリッドを維持しながら小さな画面で要素を非表示にする最良の方法は何ですか? グリッドを機能させたまま、中画面のグリッドから要素を削除することさえ可能ですか?

4

5 に答える 5

2

重複したコンテンツでこれを機能させることができます：

<div class="row hide-for-medium-down">
    <div class="three columns">...</div>
    <div class="three columns">...</div>
    <div class="three columns">...</div>
    <div class="three columns">...</div>
</div>
<div class="row show-for-medium-down">
    <div class="four columns">...</div>
    <div class="four columns">...</div>
    <div class="four columns">...</div>
</div>
于 2013-06-28T16:41:02.707 に答える
2

私が思いついた最善の解決策は、ブラウザーのサイズが変更された (または特定のサイズで読み込まれた) ときに、jQuery を使用して特定の列に変更を加えることです。

以下のようなものです（私のプロジェクトファイルから直接取り出したものなので、特定の目的のために編集する必要があります）。

$(document).ready(function() {
    check_column_size();  
});

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

function check_column_size() {
    if( $(window).width() >= 768 && $(window).width() <= 800 ) {
        $('section#main').removeClass( 'eight' ).addClass( 'eleven' );
        $('section#sidebar').removeClass( 'hide-for-small' ).addClass( 'hide' );
    } else {
        $('section#main').removeClass( 'eleven' ).addClass( 'eight' );
        $('section#sidebar').removeClass( 'hide' ).addClass( 'hide-for-small' );
    }
}

hide-for-smallクラスを追加/削除する行が必要なのは、そのクラスにスタイルが含まれているためです。

display:inherit !important;

これは、要素を非表示/削除しようとする試みをオーバーライドします。そのため、「小さい」以上の解像度で要素をうまく非表示にするために、そのクラスを削除してから、後で再度追加する必要がありました。

私の場合はうまくいくようですが、1つの小さなセクションでしか行っていません。ページ上の多くの異なる要素に対して一度に実行しようとすると、問題が発生する可能性があります。

于 2012-12-28T17:45:14.173 に答える
-1

CSSメディアクエリを探しているようです。次のページをお読みになることをお勧めします。

http://www.w3.org/TR/css3-mediaqueries/

また、コンテンツを非表示にするのではなく、サイズを変更して、モバイルユーザーもコンテンツを表示できるようにします。ただし、デザインの選択が不適切だと思われる場合を除きます。

それがお役に立てば幸いです。

于 2012-10-23T10:21:09.470 に答える