0

メディアクエリは初めてで、次の問題があります。この簡単なレイアウト (www.spiaggiati.it/antani/) を特にスマートフォンとタブレットに合わせる必要があります (このアプリケーションではデスクトップはそれほど重要ではありません)。

私はあなたが見る順序でこれを試しました（あなたは私のウェブサイトでscreen.cssシートをチェックすることができます）：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) (for smarthpones)

@media only screen and (min-width : 321px) (for smartphone landscape)

@media only screen and (max-width : 320px) (for smartphone portrait)

@media only screen and (min-width: 768px) (for tablet and desktop)

問題は、最後の部分 (タブレットとデスクトップ) を編集すると、スマートフォンのレイアウトも変更されることです。おそらく、メディアクエリがどのように機能するかを理解していません...

非常に複雑な機能は必要ありません。レイアウトが非常にシンプルで、高さ、幅、フォント サイズを調整するだけでよいことがわかります。

手伝って頂けますか？

よろしくお願いいたします。

4

1 に答える 1

1

次のメタタグを追加してください:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

メディア クエリの詳細については、すべての iOS デバイスについてhttp://stephen.io/mediaqueries/から詳細を確認できます。他に質問がある場合はお知らせください。ここからより良いアイデアを得ることができますhttp://webdesignerwall.com/tutorials/responsive-design-in-3-steps

于 2013-08-10T10:03:09.323 に答える