html - さまざまな解像度の画面用にデザインしたり、ズームインしたときに Web ページが歪んだりする場合、どのように対処すればよいですか?

Question

私は Web デザインの初心者ですが、wereズームインしたり、別の解像度の画面を使用したりした場合にページがどのように変化するかを処理する方法が見つかりません。これに対処するためのヒントは何ですか？

これは私が取り組んでいるページの例ですので、皆さんにも直接的なアドバイスを提供することができます.

そのページがデザインされたときは、このように見えました。

Answer 1

異なる解像度の画面用にデザインするにはどうすればよいですか?

CSS3 メディア クエリの使用を検討してください。

「メディア クエリは、メディア タイプと、特定のメディア機能の条件をチェックする 0 個以上の式で構成されます。メディア クエリで使用できるメディア機能には、「幅」、「高さ」、および「色」があります。メディア クエリを使用すると、コンテンツ自体を変更することなく、特定の範囲の出力デバイスに合わせてプレゼンテーションを調整できます。」

例:

@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* Media query targetting tablets */
}

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
  /* This media query will target the iPhone 5 only */
}

もちろん、クエリをインラインではなく個別に配置する方がよいため、次のように外部からインポートします。

<link href="aMediaQuery.css" rel="stylesheet" media="only screen and (max-width:500px)">