[移転] レスポンシブウェブデザイン CSS3 Media Queries_html/css_WEB-ITnose

レスポンシブ Web デザインの勉強を始めましょう。CSS3 メディア クエリは入門編です。

メディア クエリ。その機能は、メディア環境を決定する式を追加して、さまざまなスタイル シートを適用できるようにすることです。言い換えれば、コンテンツを変更せずに、さまざまなデバイスに正確に適合するようにページのレイアウトを変更できるようになります。

では、メディア クエリはどのように機能するのでしょうか?

2 つの方法があり、1 つはリンク内のデバイスのサイズを直接決定し、さまざまな CSS ファイルを引用する方法です:

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

画面の幅が 400px 以上の場合、styleA を適用することを意味しますメディア内の .css

属性内:

screen は、CSS2.1 で 10 種類のメディア タイプが定義されています。

と はキーワードと呼ばれます。その他のキーワードには、 not (特定のデバイスを除く) があります。 , only(特定のデバイスに限定)

(min-width: 400px) はメディア属性で、括弧内に配置されます。完全な機能については、関連するメディア機能セクションを参照してください

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

画面の幅が 600 より大きく 800 未満の場合、styleB.css が適用されることを意味します

その他のプロパティはここで確認できます: http ://www.swordair.com/blog/ 2010/08/431/

もう 1 つの方法は、