レスポンシブウェブのお勉強

標準

レスポンシブウェブ

メディアサイズに応じてデザインを最適化させるデザインのこと

Mediaquery

Media Queries はCSS2からあるMedia Type の拡張のこと。デバイスごとにウィンドウサイズが違ってくるため、ウィンドウサイズに応じてcssを切り替える。

 

Mediaqueryを使って以下の用に書いても動かなかった。

@media screen and(min-width: 1024px){
#contents{text-align: center;}
}

調べたらandの前後にスペースが入っていないとChromeでは認識してくれず
効かないらしい。解決。

【参考】

レスポンシブwebデザインで制作する時のポイント http://design-spice.com/2011/09/22/responsive-web-desig/

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/

新しいChromeでCSSのMedia Queries(@media)が効かなくなるかも
http://qiita.com/2k0ri/items/5316737011e68e856e1b

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中