WEB及びHTML関連の話題、TIPS & テクニック

WEBブラウザのクライアント領域広さによってスタイルを場合分けして変化させる方法

WEBブラウザのクライアント領域広さによってスタイルを場合分けして変化させる方法


以下のようにして、解像度の範囲ごとにスタイルを設定することができます。
この例では、画面の解像度によって、イメージがデバイスの最大幅を超えて横に溢れないよう、最適な大きさに調整します。

@media screen and (min-width: 481px) and (max-width: 640px) {
img.mainimg {max-width: 600px; max-height: 600px;}
}


実際には以下のように列挙します。

/* イメージの最大幅 */
@media screen and (min-width: 0px) and (max-width: 320px) { img.mainimg {max-width: 300px;}}
@media screen and (min-width: 321px) and (max-width: 480px) { img.mainimg {max-width: 400px;}}
@media screen and (min-width: 481px) and (max-width: 640px) { img.mainimg {max-width: 600px;}}
@media screen and (min-width: 641px) and (max-width: 800px) { img.mainimg {max-width: 750px;}}
@media screen and (min-width: 801px) and (max-width: 1024px) { img.mainimg {max-width: 900px;}}
@media screen and (min-width: 1025px) and (max-width: 1280px) { img.mainimg {max-width: 1200px;}}
@media screen and (min-width: 1281px) and (max-width: 1440px) { img.mainimg {max-width: 1350px;}}
@media screen and (min-width: 1441px) and (max-width: 1600px) { img.mainimg {max-width: 1500px;}}
@media screen and (min-width: 1601px) {}

このリストをCSSにコピー&ペーストするだけで、すぐに使用可能です。その場合、HTMLには、

<img class="mainimg" src="画像ファイル" />

のようにクラスの指定とともに記述してください。

もちろん、イメージの大きさだけでなくても、任意のCSS記述を行うことができます。

また、以下のようにして CSS 自体を選択させることも可能です。

<link href="0-320.css" rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 320px)" />
<link href="321-480.css" rel="stylesheet" type="text/css" media="screen and (min-width: 321px) and (max-width: 480px)" />
<link href="481-640.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width: 640px)" />
<link href="641-800.css" rel="stylesheet" type="text/css" media="screen and (min-width: 641px) and (max-width: 800px)" />
<link href="801-1024.css" rel="stylesheet" type="text/css" media="screen and (min-width: 801px) and (max-width: 1024px)" />
<link href="1025-1280.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1025px) and (max-width: 1280px)" />
<link href="1281-1440.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1281px) and (max-width: 1440px)" />
<link href="1441-1600.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1441px) and (max-width: 1600px)" />
<link href="1601-inf.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1601px)" />




WEB及びHTML関連の話題、TIPS & テクニック

Information of This Page
WEBブラウザのクライアント領域広さによってスタイルを場合分けして変化させる方法 pubdate:


© 2024
Author : FloatGarden