More Related Content Similar to ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』 Similar to ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』 (20) More from Naoki Matsuda (8) ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』3. リキッド < レスポンシブ
• ブラウザの幅に応じて • デバイスの幅に応じて、
要素の幅のみが可変 要素の幅だけでなく、
色、背景なども可変
• ベースレイアウトは同じ。
デバイス毎に個別の
レイアウトにはならない
• レイアウトもデバイス毎に
適したものに可変
• コンテンツ量も可変
8. <meta name="viewport"
content="width=640">
640px
ちなみに、Appleのサイトだと、
<meta name="viewport"
content="width=1024">
11. Orientation
端末の向きを変えて使用できる。
「Screen Orientation」
向きでブラウザの横幅が変わる。
portrait
320px
landscape
480px
12. 主要スマートフォンの解像度
機種名 ディスプレイサイズ devicePixelRatio ブラウザのサイズ
iPhone4 / iPhone4S 640 × 960 2 320 × 480
iOS
iPhone3G / 3GS 320 × 480 1 320 × 480
HT-03A 320 × 480 1 320 × 480
Xperia / Xperia arc 480 × 854 1.5 320 × 570
HTC Desire HD 480 × 800 1.5 320 × 533
Android Nexus One 480 × 800 1.5 320 × 533
Galaxy S 480 × 800 1.5 320 × 533
IS03 640 × 960 2 320 × 480
Galaxy Tab 600 × 1024 1.5 400 × 682
15. Media Queries
W3C Recommendation 19 June 2012
@media screen and (min-width: 768px) {...}
<link media="screen and (min-width:
768px)" href="xxxx.css">
@import url("xxxx.css") only screen and
(min-width: 768px);
20. Media Queries
W3C Recommendation 19 June 2012
width min-width: 400px color min-color: 4
height min-width: 400px color-index min-color-index: 1
device-width device-width: 800px monochrome min-monochrome: 1
device-height device-height: 600px resolution min-resolution: 300dpi
orientation portrait | landscape scan progressive | interlace
aspect-ratio aspect-ratio:2/2 grid grid:0
http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/
21. CSS - float & display
480px 768px
#main #main #sub1 #main
#sub1 #sub2
#sub2
#sub2
#sub1 #sub1 #sub1
float: none; float: left;
display: none; display: block; display: block;
22. CSS レイアウトに使えるプロパティ
ボックスを横並べ ボックスの幅を簡単リキッドに
display: box-flex: 1;
box;
ボックスの幅に、余白も含める
flexbox;
table-cell; box-sizing: border-box;
inline-block;
ボックスの表示順を自在に
box-ordinal-group: 1;
27. IE7でイメージが汚く縮小される
imgSizer.js
IE7 を使う
Chrome
Safari
http://unstoppablerobotninja.com/entry/
fluid-images/
28. CSS Sprite での
テキスト飛ばしは、こう書くのが
主流(らしい)
.sprite {
.sprite {
text-indent: -9999px;
text-indent: 100%;
}
white-space: nowrap;
overflow: hidden;
実際、9999px分のエリアが
}
描画されてしまうので、負荷
が高めになる。
描画させるエリアを最小限に。