レスポンシブサイトあれこれ

最近、新しいiPadが登場したかと思えば、Kindleが発売開始したり、そして買ってもないKoboが勝手に送られてきたりとタブレット市場が盛んですね。
そんなわけで、今回はレスポンシブのサイトのサンプルをいじったりしてみました。

前に、レスポンシブデザインについてスライドでまとめたのですが、
サンプルサイトを載せてなかったので、改めてサンプルをアップしてみました。
時間がなくて、本文の一部を某ブログから勝手に借用してます。(そのうち修正します・・・)

メディアクエリーについて

どのあたりで切り替えるかは、対応デバイスによって変わってくるのですが、
今回は↓のような感じにやってます。

@media only screen and (min-width: 481px){
 iPad用の記述
}
@media only screen and (min-width: 961px){
  PC用の記述
}

メディアごとに記述してますが、途中からものすごく書きづらかったです・・・。
この記事に習って、
Sassをうまく使いつつ、パーツ単位で記述した方がストレス無くかけるかと思います。

レイアウトの単位

基本的なことですが、
横幅、margin paddingの幅などレイアウト関連は%で指定しています。
フォントサイズはremを使ってます。
(rem非対応ブラウザ向けにpxでも一応指定してます)

html {
	font-size: 62.5%; /* 1rem = 10px */
}
p {
	font-size: 20px;//非対応ブラウザ用
	font-size: 2rem;
}

Youtubeなどの動画を読み込むときはFitVids.jsが便利!

小難しい設定なしでさくっと対応できます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
	$('#contents').fitVids();
	$("#contents").fitVids({ customSelector: "iframe[src^='http://socialcam.com']"}); 
</script>

Googlemapの対応

iframeで表示させておいて、iframe自体にmax-width: 100%;と指定してやるだけで対応できます。

文字をコンテンツぴったりにさせたい

画像をつくらなくても、
jsで自動で折り返したりしてくれます。

<script src="./js/jquery.slabtext.min.js"></script>
<script>
	function slabTextHeadlines() {
        	$(".main h1").slabText({
                	"viewportBreakpoint":240 // 240px以下の場合は無効に
            	});
        };
        $(window).load(function() {
                setTimeout(slabTextHeadlines, 1000); //webフォントのロード時間を考慮してタイミングを調整
        });
</script>