レスポンシブWebデザインに対応するFacebookのLikeBox
FacebookのLikeBoxを可変にするCSS
親要素に対して、横幅100%で指定してレスポンシブデザインに対応させます。
#fb-root { display: none; } .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { width: 100% !important; }
レスポンシブデザインで作りたいなと考えているサイトがあります。
その場合、FaceboolのLikeBoxはどう対応させるのかと思って調べました。
なので、まだ実際には検証していません。
とりあえずの、メモです。
レスポンシブデザインとリキッドデザインの違い
レスポンシブデザイン
1つのHTMLファイルを、CSS3(Media Queries)で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。その場合、各デバイスに応じて不必要な要素は非表示にするなど、レイアウトの最適化を行います。
リキッドデザイン
画面サイズに応じて、要素が横幅100%相対的または可変的に調整されて表示されます。
レスポンシブデザインについて、わかりやすい説明のサイト
必読!5分でわかる流行のレスポンシブWebデザインまとめ | デザイナーブログ | 株式会社LIG
必読!5分でわかる流行のレスポンシブWebデザインまとめ その2!! | デザイナーブログ | 株式会社LIG