2

レスポンシブ Web ページのデザインに関する優れたチュートリアル/ガイドを教えてもらえますか?

私は基本的なことにはかなり精通していますが、特に探しているものは次のとおりです。ブラウザ ウィンドウのサイズが変更されると、「流​​動的に」調整されるだけではないレスポンシブ Web ページを見てきました (この種のレスポンシブ デザインについては、私は十分に精通しています)。簡単に設定できます）。代わりに、ブラウザー ウィンドウが特定の小さいサイズに達するまで元の (つまり最大の) レイアウトを維持し、その後、ブラウザー ウィンドウの小さいサイズに完全に対応するようにページを別のレイアウトにスナップしました。この変更には、レイアウトだけでなく、表示されるアイテムの数と、小さなウィンドウでのナビゲーションを容易にする追加の UI 要素のアクティブ化も含まれていました。

トランプが窓に並んでいると想像してみてください。ウィンドウが全画面表示モードのときに、5 枚のカードが隣り合わせに収まるとします。ここで、ウィンドウのサイズが縮小されたと想像してください。レイアウトは、最初と最後のカードがほとんど表示領域から出るまで同じままです。ウィンドウがそのサイズになると、ページは別のレイアウトに「スナップ」し、中央に 3 つのカードのみが表示され、左右の端に矢印が表示され、ユーザーがスクロールできるカードが他にもあることを示します。この種のレスポンシブ デザインはどのように行われますか?

4

2 に答える 2

3

説明している所定の位置にスナップする動作は、メディアクエリを使用して、さまざまな画面サイズにさまざまなスタイルを定義することによって実現されます。

例えば：

@media screen and (min-width: 480px) {
    .nav {
        float: none;
    }
}

@media screen and (min-width: 620px) { 
    .nav {
        float: left;
    }
}

ここから学習を始めるのに適した場所です。

于 2012-06-15T03:30:25.597 に答える
0

最初の完全に正しい答えに追加するには、html5 ボイラープレートをチェックアウトすることもできます。レスポンシブ デザインを行うためのかなり優れた CSS スターターがあります。それは私をかなり助けてくれました。誰かがすでにそれを書いているなら、もう一度書いても意味がありません!

私は通常、http://www.initializr.com/にアクセスして、そこからレスポンシブ テンプレートを取得します。

于 2012-06-15T21:11:33.753 に答える