Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern
Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern
ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。 今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。 記述方法の種類 一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。(ブレイクポイントを480px、768px、980pxとした場合の例です) 1. PCのスタイルから記述していく方法 デフォルトでPC用のスタイルを定義し、タブレット/スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。 /* デフォルト:980px以上用(PC用)の記述 */ @media screen and (max-width: 979px
”モバイルファースト”の第一人者、Luke Wroblewskiのブログから記事を翻訳してご紹介します。今回はマルチデバイスに対応するレイアウトパターンについてです。元記事:Multi-Device Layout Patterns, May 14, 2012 フルードグリッドとメディアクエリによって、レスポンシブデザインはウェブページのレイアウトを様々なスクリーンに対応させることを可能にしました。たくさんのデザイナーがこの技術を喜んで使うに従い、たくさんの革新的方法が生み出され、明確なパターンが出現してきました。今回は、マルチデバイスにうまく対応する有名なレイアウトパターンを一覧にしてみました。 レスポンシブデザインの最新レイアウトパターン傾向をつかむために、Media Querieのサイト上で取り上げられているすべての例を何度も綿密にチェックしました。その際、パターンとして最も頻繁に表れ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く