Responsive Web Design 始めました
以前から名前は聞いたことがあった”レスポンシブデザイン”。
今作ってるアプリがモバイル対応しないと作った意味が無いので勉強する。
media queriesを使った実装
Media Queruesはcss3からの機能。
対応する端末の解像度に合わせて設定していく。
端末の解像度がどの程度か知る必要がある。
case:MobileDesign! – スマートフォンサイトの制作TIPS BLOG - » スマートフォン・タブレット画面解像度一覧
この辺りを見ると何となく基準がわかるのではないかと。
基準を模索するのが面倒なので、下記の記事を参考にしてみる。
Responsive Web Design: Layouts and Media Queries
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 980px) {
}
@media screen and (max-width: 750px) {
}
@media screen and (max-width: 540px) {
}
@media screen and (max-width: 380px) {
}
1200, 980, 750, 540, 380の画面MaxWidthで分けている。
これで実装してみたところ1200を超えると、デフォルトの表示に戻ってしまうがレスポンシブになった。
TwitterBootStrapを使う
ツールに頼るのはいいことだが、いまいち導入の方法がわからない。。。(簡単だと思うのだが。。。)
responsive用のcssがあって、きっとそれを使えばいい。
実装はMediaクエリを使ったもの。以下のサイズで分けられている。
- 1200px
- 980px
- 768px
- 767px
- 480px
TwitterBootStrap 入門
最近入門を果たした。簡単だった。とても簡単にかっこいいデザインを手に入れられた。
マジすごい。
どのように使えるようになったかというと、下記の記事を読んだだけである。
- Twitter Bootstrap使い方-コンポーネント-v2.0.4 <- ここが一番良い感じ
- Twitter Bootstrapの使い方
- Twitter Bootstrap使い方-javascript-v2.0.4
結局のところ本家のドキュメントを見るのがいいという話になる。
画像をレスポンシブにする
