CSSを使用してテーブルレイアウトを変更する

Question

モバイルデバイスとデスクトップで違って見えるようにする必要がある単純なページがあります。デスクトップの場合、私はいくつかの段落の左側にロゴが必要です。モバイルの場合は、ページの見出しを削除し、ロゴをテキストの上に置く必要があります。これまで私はこれで多くの運がなかった。これをCSSで動作させるにはどうすればよいですか？現在のところ、私はちょうど1つの列にロゴと別の列にテキストが入ったテーブルにテキストとイメージをレイアウトしています。

Answer 1

解決策の1つは、テーブルの代わりに 'column' divを持つメディアクエリを使用することです。次のように

CSSのコードは次のようになります。

@media only screen and (min-width: 1200px) { 
    .two-col { 
    -webkit-column-count: 2; 
     -moz-column-count: 2; 
      column-count: 2; 
     -webkit-column-gap: 1.5rem; 
     -moz-column-gap: 1.5rem; 
       column-gap: 1.5rem 
    } 
} 

し、HTMLにはこのようなものになるだろう：

<div class="two-col"> 
/* textual content here... */ 
</div> 

あなたはあなたの状況に合わせて、これを微調整する必要がありますが、基本的にはそれだろうメディアクエリを使用してモバイルデバイスまたはデスクトップをチェックします。デスクトップの場合は、同じ幅の2つの列を作成します。あなたのケースでは、画像が先に進み、次にテキストが右側の列に折り返されます。モバイルデバイスの場合、列は作成されず、テキストの上にイメージが表示されます。

Answer 2

異なる値のCSSプロパティをメディアクエリで指定できます。 この件に関する説明はhereです。

小型デバイスのための一般的なクエリは次のとおりです。

@media screen and (max-width: 1024px) { 
    ... 
} 

それは1034pxの下で、すべての画面を照会し、プロパティの新しいセットを定義します。