読者です 読者をやめる 読者になる 読者になる

naMemo

うぇっぶやアプリやデザインに興味深々なキモオタのメモ

自力でレスポンシブ・ウェブデザイン

今までレスポンシブにするときCSSフレームワークつかってたけど、自力でやるとエライ大変だったので忘れないようにメモ

viewportの設定

head内に

<meta name="viewport" content="width=device-width, initial-scale=1.0">

スクリーンサイズごとにCSSを指定

deviceごとのスクリーンサイズ
Screen Sizes

PCでは横並びのディスプレイ、スマフォ、タブレットでは縦並びにするとか…
CSSでdisplayをblockにしたりnoneにしたりをスクリーンサイズで切り替える

@media screen and (min-width:480px){/*タブレット用*/}
@media screen and (min-width: 768px){/*PC用*/}

  • タブレット以下のスクリーンサイズでは横並びメニューをアコーディオンメニュー(縦並び)にする
    jQueryのslideToggle()やtoggleClass()を使う
  • 画像、動画の最適化
    →画像はmax-width:100%に。埋め込み動画がムズイ
  • リキッドレイアウトでコーディング

レスポンシブデザインについてはドットインストールがわかりやすかった
http://dotinstall.com/lessons/responsive_html

使ってないけど、CSS3のFlexible Box使うと便利らしい

レスポンシブはdisplayをいかに切り替えるかがわりと重要な気がした。あとリキッドレイアウト。