Contenu connexe Similaire à ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』 Similaire à ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』 (20) Plus de 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分のエリアが
}
描画されてしまうので、負荷
が高めになる。
描画させるエリアを最小限に。