タグ

media queryとonscreenに関するytkwsmのブックマーク (2)

  • レスポンシブ時代の10のキーワード | grip on minds

    1. Responsive Web Design(レスポンシブウェブデザイン) スクリーンサイズに応じて、コンテンツの並び替えや表示/非表示、レイアウトの変更、画像やテキストをリサイズする手法の総称で、Ethan Marcotte 氏が 2010年に A List Apart に寄稿した「Responsive Web Design」で紹介されました。 スクリーンサイズの判定は、おもに CSS3 の「Media Queries(メディアクエリ)」を用いるので、HTML がワンソースで済むのが最大の特長です。 レスポンシブ Web デザインのメリット/デメリットを以下に記述します。 メリット デバイスごとに HTML ファイルを用意しなくて済むので、開発コストが抑えられる 将来のデバイス(家電など)にも対応できる URL がひとつなので、SEO の観点からも望ましい デメリット ファイルサイズ

  • デバイスに合わせてCSSを振り分ける「Media Queries」 | DevelopersIO

    Media Queriesは、読み込まれるCSSや、CSSの記述のインラインに条件を加えること出来るようになる仕様です。 今までもCSS2のMedia typesを使い、screenやprintなど大まかなメディア用スタイルを設定することはできました。ですが、それでけでは昨今のスマートフォン、タブレット端末事情にはとても対応できません。JavaScriptで対応する方法もありますがシンプルではありません。そこで、CSS3だけで振り分けが可能になるのがMedia Queriesという仕様です。 Media Queries Media Queriesはユーザーの端末、スクリーンサイズをもとに適したスタイルシートを適用することができます。Media Queriesを利用することで、PC用スタイルシート、タブレット用スタイルシート、スマートフォン用スタイルシートと個別にスタイルを指定することができ

    ytkwsm
    ytkwsm 2013/07/31
    なんとなくわかってた感。max-widthとmax-device-widthは違ったのですねorz
  • 1