レスポンシブ・(ウェブ・)デザインってば。

By エックン on 2012.06.28 Thu - 16:10  |   Facebook

レスポンシブ・(ウェブ・)デザインってさーデバイスのスクリーンサイズに対応した CSS をそれぞれマルチに割り当てれば好いのだ。とは想定していた。しかし jQuery でやるんか?PHP でやるんか?と悩んでいたのだけども。CSS (HTML) のみでできるんか!?と想定外。

レスポンシブ・(ウェブ・)デザインって超ぉ簡単じゃんよ!って声高々に言ってみる。
ちょっくら試しに。

↓ CSS を読み込む際に media を以下のように指定するんだって。

<link rel=”stylesheet” media=”screen and (max-width: 65025px)” href=”pc.css”>
<link rel=”stylesheet” media=”screen and (max-width: 980px)” href=”980.css”>
<link rel=”stylesheet” media=”screen and (max-width: 800px)” href=”800.css”>
<link rel=”stylesheet” media=”screen and (max-width: 640px)” href=”640.css”>
<link rel=”stylesheet” media=”screen and (max-width: 480px)” href=”480.css”>
<link rel=”stylesheet” media=”screen and (max-width: 320px)” href=”320.css”>

簡単しょ??つぎは jQuery Mobie を勉強せねばね。

-> DEMO

追記:
ついでに云うと、各サイズにしてブラウズしてくれる便利サイト。レスポンシブピクセル?

In web  |   Tagged , , , , ,

facebook