for beginner to know what is RWd and mobile web application.

1. CS-ID Bear Lee
RWD and Mobile Web

2. Responsive web design (RWD) is a web
design approach aimed at crafting sites to
provide an optimal viewing experience—
easy reading and navigation with a
minimum of resizing, panning, and
scrolling—across a wide range of devices
(from mobile phones to desktop computer
monitors).
Still from Wiki say…

3. RWD
RWD能
想 RWD
CSS
會 能
...

5. ...

6. ...

7. ...

8. ...

9. ⼀一
的
能

10. Media Queries

11. CSS
都 下
...

12. @media [media type] and [(media feature)]
Media Queries

13. all aural braille embossed handheld
print projection screen tty tv
media type
也有 CSS
多 Opera mini 多
All screen( )能

14. width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| aspect-ratio | min-aspect-ratio | max-aspect-ratio
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid
media features

15. <link rel="stylesheet" type="text/css"
href="760.css"
media=“
screen
and (min-width: 768px)
and (max-width: 979px)
">
1

16. @media screen and (min-width: 768px)
and (max-width: 979px) {
.content{
width:700px;
margin:0 auto;
}
}
2

17. .............. Scss
2
SCSS(SASS) CSS Preprocessor 多Nest,Variable,Mixin,extend,
for loop, if會 ...

18. .content{
width:960px;
margin:0 auto;
@media screen and
(min-width: 768px) and (max-width: 979px) {
width:700px;
}//content 768-979
}//content end
是

19. media queries W3C
” ” 多

20. http://caniuse.com/

21. ⼈人 IE5678.. 多

22. ⼈人 IE5678.. 多
https://css3-mediaqueries-
js.googlecode.com/svn/trunk/css3-
mediaqueries.js
https://rawgit.com/scottjehl/Respond/
master/dest/respond.src.js

23. ⼈人 IE5678.. 多
https://rawgit.com/scottjehl/Respond/
master/dest/respond.src.js

24. 就 ⼀一
HTML CSS
RWD能
RWD

25. RWD 個到

26. RWD 個到

27. RWD 個到

28. RWD 個到

29. RWD 個到

31. 我 來
能
個到

32. 我 來
能
個到

35. Mobile Device
不 CSS

36. HTML
能
RWD

39. RWD
⼤大 了
在 HTML
想 能

41. ...
App

42. Mobile Web app

43. 要 上
好
position:absolute;
(fixed has performance issue)

45. ⾃自 這
(Momentum Scrolling)
overflow:scroll;
-webkit-overflow-scrolling: touch;
iscroll javascript plugin
好

47. 能
好
css3 animation or transition
touchstart to load or include

49. Mobile app 為

50. <meta name="viewport" content=“
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
width=device-width">
initial-scale 到
minimum-scale 看 到
maximum-scale 看 到
user-scalable 看 1 or 0 (yes or no)

51. <meta name="apple-mobile-web-app-capable"
content="yes">
<link rel="apple-touch-icon" sizes="72x72"
href="XXX.png"/>
App mod
App icon
<meta name="format-detection"
content="telephone=no">

52. 你 Mobile Web