響應式(Responsive Web Design)簡單講解 和程式碼實例

1. RWD(Responsive Web Design)
ncku Tien-Yang Wu
1

2. 什麼是響應式設計？
2

3. 什麼是響應式設計？
根據不同尺⼨寸螢幕⽽而有不同呈現⽅方式！
3

4. 舉個例⼦子
沒有RWS
有RWS
4

5. 舉個例⼦子
沒有RWS
有RWS
太潮了...
5

6. 為什麼要⽤用響應式？
不能因為潮就⽤用啊,太膚淺了
6

7. 來說說為啥要⽤用
1.⾏行動裝置世代來臨
2.開發成本較低
3.維護較為⽅方便
7

8. 來說說為啥要⽤用
1.⾏行動裝置世代來臨
2.開發成本較低
3.維護較為⽅方便
4.因為潮
8

9. 響應式三⼤大要素
Fluid Grid Layout
Media Queries
Flexible Media
流體佈局
媒體查詢
⾃自適應媒體內容
9

10. Fluid Grid Layout 流體佈局
網站內容被切割成單元塊(像是可流動般)
10

11. Media Queries 媒體查詢
css3根據螢幕尺⼨寸判斷所載⼊入之css
11

12. Flexible Media ⾃自適應媒體內容
圖⽚片和⽂文字會隨螢幕尺⼨寸改變⽽而放⼤大or縮⼩小
12

13. 先來個不流動的排版
960px
40px 480px
13

14. 先來個不流動的排版
960px
40px
480px
960px 可以被2,3,4,5,6,8,10,12,15,16,20,24整除
14

15. 剖析DIV
class=‘a’
class=‘b_1’
class=‘b’
class=‘b_2’
15

16. 看個CSS
margin: 邊界
上下0px 左右對⿑齊
置中
float:left
向左流動
16

17. 打開
⾃自⼰己先玩玩看吧
記得⽤用google chrome 檢查元素,任意更改數值或是刪掉
css吧！
17

18. 來個流動的
還記得Media Queries 嗎？
@media ⽤用寬度 ( width ) 判斷
18

19. 來個流動的
還記得Fluid Grid Layout 嗎？
width 不再⽤用px 要⽤用％(百分⽐比)
19

20. 來個流動的
電腦平板⼿手機
20

21. 打開
看⼀一下CODE想⼀一下和不流動的有何不
同
記得⽤用google chrome 檢查元素,任意更改數值或是刪掉
css吧！
21

22. 為什麼流動的地⽅方會出現px呢！
22

23. ⼩小技巧
max-width: 960px;
如果只有百分⽐比的話⼀一定會佔滿整個螢幕,必須要限
定它最⼤大的尺⼨寸才⾏行
23

24. 結論
在流動的世界裡,不能只有百分⽐比存在,要適時的使
⽤用px去限制最⼤大或是最⼩小才⾏行！
24

25. Flexible Media勒！！！
25

26. Flexible Media
⽂文字的⾃自適應：em,rem
圖⽚片的⾃自適應：
img {
height: auto;
max-width: 100%;
}
26

27. ⾃自適應⽅方法百百種！
技術也持續不斷推陳出新
唯有不斷學習新知識,新技術
27

28. ⾃自適應⽅方法百百種！
技術也持續不斷推陳出新
唯有不斷學習新知識,新技術
才能成為潮⼈人！
28

29. 學習資源
CSS3 MEDIA QUERIES 詳細介紹與使⽤用⽅方法
響應式網站範例
網⾴頁設計該⽤用哪種字級單位px,em,rem?
29