0

新しいレスポンシブページのコーディングを開始するたびに、この質問が出てくるので、皆さんに質問したいと思いました。「ページにレスポンシブを追加するときに読みやすさを損なうのは普通ですか？」

例を使用すると、よりよく理解できると思います。12列のグリッドシステムに2つの大きな列があるため、クラス.grid-6とcssで2つのdivを設定し.grid-6 {width:50%}ます。タブレットレイアウトでは、グラフィックデザイナーが3つの列を配置したので、これらの列の幅を33％に変更しましたが、クラスgrid-6（50％の幅を示唆）と実際の列の幅が33％のdivがあります。

ですから、応答性に取り組み始めると、それはすべて「ハック」のように感じます。タブレットや電話、その他のデバイスにさまざまなクラスを追加することについては考えています<div class="grid-6 tablet-grid-4 phone-grid-3">が（）、それは正しくありません。

ブレークポイントごとに列数が異なるグラフィックデザインを受け取った場合に問題が発生します。つまり、html、amiriteの列数を変更することはできませんか？

4

6 に答える 6

2

カスケードフレームワークの使用を検討してください。

カスケードフレームワークのグリッド要素は次のいずれかです

  • 次のHTML要素のいずれか：section、main、article、header、footer、aside、またはnav（これらの要素は、必要に応じて古いIEのHTMLshivでポリフィルされます）。

  • 'col'クラスを持つdiv要素（ポリフィルなしで古いIEで使用できます）。

グリッド要素に幅を追加するには、「width-XofY」形式のクラスを追加します。ここで、Yは2、3、4、5、6、7、8、9、10、12、16、または24であり、 Xは、Xよりも小さい任意の値にすることができます。

より具体的には、カスケードフレームワークで使用できる有効なクラスの例を次に示します。「width-1of2」（幅：50％）、「width-3of4」（幅：25％）、「width-2of5」（幅：40 ％）、'width-2of5'（幅：40％）、'width-2of7'（幅：28.5714286％）、および'width-13of16'（幅：81.25％）

これらのクラスに加えて、コンテンツにそれぞれ適合し、100％の幅の残りを埋めるクラス「width-fit」および「width-fill」を使用することもできます。または、独自のクラスとIDを定義し、それらのクラスにカスタム幅を追加して、「セマンティック」な方法で処理を実行することもできます。

ビルドに応答性モジュールが含まれている場合（推奨ビルドの場合）、モバイルではすべてのグリッド要素の幅が自動的に100％にリセットされます。「mobile-width-3of16」、「phone-width-3of7」、「tablet-width-2of4」などのクラスを使用して、さまざまな幅の範囲とクラス「desktop-hidden」、「mobile-hidden」のレイアウトをカスタマイズできます。 、'phone-hidden'または'tablet-hidden'は、範囲のある特定の画面のコンテンツを非表示にします。

ただし、これでも場合によっては次のような問題が発生する可能性が<div class='col width-1of4 tablet-1of3 phone-1of2'> </div>あります。そのような場合、セマンティックにするのがより良いアプローチです。具体的には、<div class='col custom_class'> </div>またはのような<section class='custom_class'> </section>操作を行ってから、カスタムCSSで各ブレークポイントの幅を自分で設定します。

于 2014-01-07T19:52:35.713 に答える
1

私は少し迷っていますが、モバイルブラウザについてのあなたの話は正しいと思いますか？もしそうなら、@mediaがあなたの解決策です。

html,body{
    min-height:100%;
}
.grid-6 {
    width:33%;
    min-height:100%;
    margin:0px;
    display:inline-block;
}

上記は、あなたが説明したものと同様の列グリッドを作成します。おもう？笑これらをモバイルブラウザ用に1つの列に変換するのは簡単です。@mediaを条件と考えてください。基本的に私は、iPhone4gs以下の画面を基準にした「デバイス幅<=480pxの場合」と書いています。

@media only screen and (device-width:480px){
    .grid-6{
        width:100%;
        display:block;
    }
}

@media条件内で宣言されていない他のすべてのスタイルは、上記のクラスから継承されます。これがお役に立てば幸いです

于 2012-12-17T10:26:31.897 に答える
1

まず第一に、クラスの物理的な外観ではなく、その機能にちなんで名前を付ける方が適切です。たとえば、ページのどこにでも存在できるように、navigationContainerよりも適切な名前です。leftContainernavigationContainer

さまざまなレイアウト、画面サイズ、向きなどに適応する限り、特定の条件を満たすデバイスと画面にのみクラス定義を適用できるmedia属性（または宣言）を利用する必要があります。@mediaここに、関数の後にクラスに名前を付けることの利点があります。関数にちなんでクラスに名前を付けると（のようmainContentGridに、さまざまなメディアスタイルシートすべてでクラスを何度でも再定義できます。原則として、表示コンテキストに応じて1つのシートのみが適用されるため、スタイルは常に次のようになります。表示コンテキストに適しています。これにより、発生している複数クラスの問題が解消され、コードがクリーンアップされます。

より正確な意見が必要な場合は、コードを投稿してください。私の考えをお伝えします。

于 2012-12-17T10:27:29.530 に答える
0

列の数は、すべてのブラウザサイズで一貫している必要があります。幅とパディングのみを変更する必要があります。ただし、モバイルではすべての列を100％の幅にリセットするのが一般的ですが、それ以外の場合は、完全に削除するのではなく、縮小するだけです。デザイナーに戻るか、グリッドを再調整して、すべての応答が準拠する倍数にすることをお勧めします。

于 2012-12-17T10:27:45.643 に答える
0

Flexboxはソリューションですが、まだ時間はありません。

セマンティクスをそれほど気にしない場合は、を使用して説明するのに最適なソリューションですtablet-grid-4。クラス名にサイジングを使用した定義のグリッドは、セマンティックではありません。のように名前を付けることもできますdesktop-main desktop-aside tablet-main tablet-aside。しかし、私は実際にはいつも自分自身に足りません。タブレットの3つの偶数列の名前は何ですか。それはメインではありません、それは脇ではありません。それらはそれぞれ3分の1の列です:)コンテナ全体がレイアウト用である場合、htmlのレイアウトについて話さないのは非常に困難です。

よろしく

于 2013-01-28T01:48:43.033 に答える
0

DeadSimpleGridを試してください。次のようなグリッドレイアウトクラスをハードコーディングするのではなく

<div class="grid-6 tablet-grid-4 phone-grid-3"></div>

次のような抽象クラスを割り当てます

<div class="col left"></div>
<div class="col right"></div>

次に、さまざまな画面サイズのこれらのクラスに幅を割り当てます

.left, .right    { width: 100%;   }

@media only screen and (min-width: 54em) {
  .left, .right    { width: 50%;   }
}

この例は、デフォルトで小さな画面（スマートフォンなど）を対象leftとrightし、コンテナーの幅全体（ネストがサポートされているため、別の列になる可能性があります）を持ち、2つの要素を相互に表示します。ただし、画面が十分に大きい場合は、2つの列が隣り合って表示されます。

Dead Simple Gridは非常にシンプルですが（cssコード全体は250バイトです！）、驚くほど強力です。

于 2014-01-24T11:40:41.727 に答える