web/responsive の履歴(No.1)

レスポンシブWebデザイン#

ブログの記事内の写真などの扱い（FluidImage）#

img{
width:auto; /# IE8 #/
max-width: 100%;
height: auto;
display: block;
}
  • 表示領域に余裕がある場合は等倍で表示。
  • 表示領域が狭い場合、幅に合わせて縮小。
  • IE8はwidth:auto;入れればOK。IE7には非対応
  • display: block;は無くても大丈夫な事が多い。
  • Fluid Imageにしたい時のCSSの記述方法

CSS3 Media Queries(IE8以下NG)#

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="viewport" content="width=device-width,initial=1.0">

よりも

<meta name="viewport" content="initial-scale=1.0">

のほうが良さそう。

/#
スマホ: 320px - 480px 
タブレット: 480 - 768px
PC: 768px以上
*/
/# smartphone #/

/# tablet #/
@media all and (min-width: 480px]] {
}
/# pc #/
@media all and (min-width: 768px]] {
}

Tips#

画像をはみ出さないようにする#

img {
    max-width: 100%;
}

Youtube（iframe）を対応させる（IE6-8OK）#

<div class="movie">
<iframe src="http://www.youtube.com/embed/XvannIjPtbQ" frameborder="0"></iframe>
</div>
.movie {
    position: relative;
    height: 0;
    padding-top: 56.25%; /# 16:9 #/
}
.movie iframe {
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    width:100%;
}

参考#