スクリプト初心者なのですが、

質問

スクリプトについて教えて頂きたいのですが、
横の解像度が
1024px以上、1280pｘ以下のときはdesign-1.css
1280未満から上はdesign-2.css
を読み込ませるには、どのようにｈｔｍｌへ記述すればよろしいのでしょう？
色々調べてみたのですが、解決できず悩んでおります。
よろしければ記述方法を教えていただけませんでしょうか？
よろしくお願いいたします。

回答No.2

Chaire · ベストアンサー

JavaScript は関係ないです。

<link rel="stylesheet" type="text/css" href="design-1.css"
　media="only screen and (min-device-width: 1024px) and (max-device-width: 1280px)">

<link rel="stylesheet" type="text/css" href="design-2.css"
　media="only screen and (min-device-width: 1281px)">

詳しくはメディアクエリ（Media Queries）で調べて下さい。

---
もっとも、メディアクエリは比較的新しいブラウザしかサポートしていません（モバイル Opera などは早期からサポートしていましたが）。そこで、三つの方策が考えられます。

(a). メディアクエリをサポートしない古いブラウザ向けにはシンプルなスタイルだけを提供する（メディアクエリをサポートしないブラウザは media="only..." を読み込まないので、スタイルが混ざる心配はない）。

(b). 古いブラウザでもメディアクエリを動かすスクリプトを使う。

(c). メディアクエリに関係なく、screen.width/availWidth で判断するスクリプトを使う。

私のお勧めは (a) です。スタイルを適用できるかが、スクリプト（の有効・無効）に左右されるようなことは避けるべきです。どうしても、ということなら (b)。最後の（あまり当てにならない）手段として (c) です。

お礼

お急がしいところ、ご回答ありがとうございます。
早速、調べさせていただきました。
メディアクエリとはｃｓｓ3になるのですね。
まだまだ、勉強中なものでChaire様のような、ご回答をいただけるとても助かります。
本当にありがとうございました。
また、何かございましたら、ご教示の程よろしくお願いいたします。

回答No.1

SAYKA

どちらかというと　両方のCSSを読み込んでおいて別々のIDで設定。
bodyまたはhtmlのIDを解像度によって切り替える　ってやり方のが早いと思うよ。

補足

早速のご回答ありがとうございます。
そのような方法もあるのですね・・・
記述は難しいのでしょうか？