最近、レスポンシブデザインとやらを導入したデモ用サイトを作ってみたのですよ。 その時に気がついたことをメモしておく。
とにかくキモは各端末の解像度ごとのCSSを書くことらしい。
いくつか方法があるのだけど、各端末ごとにCSSファイルを分割する方法に落ち着く。
デメリットもあるらしいけど、ひとつのファイルに全てを書き込むより可読性が圧倒的に高いと思う。
んなわけでメインのCSSファイルの冒頭にこういうのを書いて分岐させてみた。
@charset "utf-8"; @import url(r_pc.css) screen and (min-width: 976px); @import url(r_tb.css) screen and (max-width: 975px) and (min-width: 641px); @import url(r_sp.css) screen and (max-width: 640px);
それぞれPC用、タブレット用、スマホ用へのリンク。
PC用画面は横幅960px固定で組んだのだけど、ここでは「min-width: 976px」と少々余裕を持たせておいた。
この数値を960pxジャストにするとウィンドウの幅によっては横スクロールバーが出現してしまうのですよ。
なんだか気持ちが悪いのでこうやって回避した次第。
ie8ではCSSファイル中の@importは無効になるみたい。
なのでHTMLのHEADの中にこんなのを書いてみた。
<!--[if lt IE 9]> <script src="js/html5shiv-printshiv.min.js"></script> <link rel="stylesheet" href="css/r_pc.css" /> <![endif]-->
3行目でPC画面用のスタイルシートを読み込むよう指示させてみた。
スマホやタブレット端末にie8を搭載してるケースはないと思うのでこれでいいんじゃないだろか?