カテゴリー:
HTML5
閲覧数:1025 配信日:2012-01-03 00:00
横幅に応じて非表示対応
・メディアクエリcssで、display:none;するだけ
レスポンシブの画面サイズによる画像サイズ自動変更は、max-width:100%;によって行なわれる
・例えば、img{width:600px;!important;}とかしていると機能しない
max-width:100%;で困るのは、
・「Google MAP API V2」地図が表示されなくなる
・GoogleADsenseなど、直接imgタグを触れない場合
GoogleADsenseに関しては、上位タグに「max-width:100%;」でイケる
分からないのは、max-width:auto;(多分この指定は出来ない)とか、
width:auto;とかの違い。
画面サイズを変えてうまくいかないときは、
大体、block;inline;の指定がうまくいっていないため。
画面サイズに寄って切り替えればうまくいくが(media-queries.cssとかで)、結構、メンドくさい。
ちゃんとやろうと思えば思うほど、一杯記述しなければいけなくなる。
スマホメインの人には、専用サイトで切り分けた方がいいと思われ。
1/20
レスポンシブで、下記解像度による表示の違いに凝ってみたのだが、
1024×768
1280×1024
imgタグに「max-width:100%;」ってやっても、
その上位タグに「max-width:100%;」ってやっても、
「tdタグ」「trタグ」「tableタグ」「「tableタグの上位タグ」に「max-width:100%;」ってやっても、
tableがあると、レスポンシブにならないのね。
テーブルは、レスポンシブには鬼門と思われ。
しょうがないので、テーブル止めたら、普通にレスポンシブになった