css3 @media を使用すると、さまざまなメディアやさまざまな解像度で応答性の高いレイアウトを実現できます。
方法 1: 解像度に応じて異なる CSS ファイルを使用する
例
1
<link rel=
"stylesheet"
media=
"screen and (max-width: 1024px)"
href=
"middle.css"
/><link rel=
"stylesheet"
media=
"screen and (max-width: 600px)"
href=
"small.css"
/>
ログイン後にコピー
方法 2: 同じ CSS ファイルで、異なる解像度に応じて異なるスタイルを使用します
1
.first {background-color: white;}.second {background-color: black;}@media screen
and
(max-width: 800px) {
.first {background-color: green;} .second {background-color: skyblue;}}@media screen
and
(max-width: 480px) {
.first {background-color: yellow;} .second {background-color: red;}}
ログイン後にコピー
参考:
http://www.runoob.com/cssref/css3-pr-メディアクエリ。