[CSS] ie8以下をレスポンシブ対応させる必要はない＆レスポンシブ対応させない方法

レスポンシブ対応のためにrespond.jsやcss3-mediaqueries.jsを読み込ませてie対応する方法が広まってるけど（自分も以前書いた…）、よく考えたらie8以下にというかPC向けにレスポンシブ対応する必要はないよね？PCで640px以下で見たいという需要ってある？ましてや320px以下とか。そんなわけでjsやコンディショナルコメントを使用せずに、簡単なCSSだけでie8以下をレスポンシブ対応させない方法のご紹介です。

やること＆方法

• ie8以下のコンテンツ幅を固定
• 方法1：メディアクエリを利用
• 方法2：CSSハックの使用

方法1：メディアクエリを利用する

基本のcssにwidth:Aでコンテンツ幅を指定。メディアクエリ用のcssにwidth:100%;とmax-width:Aに指定。このブログはこの方法でレスポンシブ化しています。これで指定した幅以下になると対応しているモダンブラウザのみメディアクエリ用のcssが効きます。対応していないie8以下はそのままレイアウトが変わることはありません。

/*基本のcss*/
.wrap {
 width: 960px;/*コンテンツ全体の幅指定*/
}
/*メディアクエリ用のcss*/
@media screen and (max-width: 960px) {
.wrap {
 width: 100%;
 max-width: 960px;
}
}

方法2：CSSハックの使用

基本のcssにmax-width:Aでコンテンツ幅を指定。ie6、ie7用の幅指定とie8に対するmax-widthを上書きするために、ハックを使いwidth:Aを指定。ここで注意が。ちまたに広まっているie8用のハックがie9とかie10にも効いてしまうという事。ie8のみとか書いてあっても×。これで何が起こるかというとie9とかでブラウザサイズを縮めていった時、幅は固定されたままなのにメディアクエリ用のcssが反応して中身のレイアウトが変わってしまいます。なのでここではIEのみの特定のバージョンに適用される@media blocksを使用します。
詳しくは下記のリンク参照（助かりました。やっぱり海外のサイトは詳しい）

• Moving IE specific CSS into @media blocks

/*基本のcss*/
.wrap {
 max-width: 960px;
}
@media \0screen\,screen\9 {
    .wrap { width:960px; }
}

こちらの方が基本のcssだけで管理できるからいいかも。