私はまだレスポンシブ デザインに慣れていないので、私の質問が意味をなさない場合は申し訳ありません。
現在、2 つの画面幅に対して 2 つの CSS セットを実装しています。
@media screen and (max-width:659px) { ... }
@media screen and (min-width:660px) { ... }
最初のセットでは、コンテンツを含む幅 480 ピクセルのテーブルがあり、中央にmargin auto. 画面サイズが 480px から 659px の間であれば、左右に少し背景スペースがあると嬉しいです。
2 番目のセットでは、左側に列が 1 つ追加され、テーブルの幅が 660 ピクセルになります。
画面幅が 480px を下回るか、660px を大幅に超えると心配です。テーブルが切り捨てられたり、左右の余白が多すぎたりします。これがスケーリングの興味深いところです。
ビューポート メタ タグを次のように実装することをお勧めします。
<meta name="viewport" content="width=device-width, initial-scale=1">
しかし、これは私の問題に対する正しい解決策ですか? ビューポート メタ タグを実装する正しい方法は何ですか? テーブルの幅が 480 ピクセルまたは 660 ピクセルの場合、自動的に「サイズに合わせる」ことは可能でしょうか? はいの場合、どのように？