Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RWD(Responsive Web Design) 
ncku Tien-Yang Wu 
1
什麼是響應式設計? 
2
什麼是響應式設計? 
根據不同尺⼨寸螢幕⽽而有不同呈現⽅方式! 
3
舉個例⼦子 
沒有RWS 
有RWS 
4
舉個例⼦子 
沒有RWS 
有RWS 
太潮了... 
5
為什麼要⽤用響應式? 
不能因為潮就⽤用啊,太膚淺了 
6
來說說為啥要⽤用 
1.⾏行動裝置世代來臨 
2.開發成本較低 
3.維護較為⽅方便 
7
來說說為啥要⽤用 
1.⾏行動裝置世代來臨 
2.開發成本較低 
3.維護較為⽅方便 
4.因為潮 
8
響應式三⼤大要素 
Fluid Grid Layout 
Media Queries 
Flexible Media 
流體佈局 
媒體查詢 
⾃自適應媒體內容 
9
Fluid Grid Layout 流體佈局 
網站內容被切割成單元塊(像是可流動般) 
10
Media Queries 媒體查詢 
css3根據螢幕尺⼨寸判斷所載⼊入之css 
11
Flexible Media ⾃自適應媒體內容 
圖⽚片和⽂文字會隨螢幕尺⼨寸改變⽽而放⼤大or縮⼩小 
12
先來個不流動的排版 
960px 
40px 480px 
13
先來個不流動的排版 
960px 
40px 
480px 
960px 可以被2,3,4,5,6,8,10,12,15,16,20,24整除 
14
剖析DIV 
class=‘a’ 
class=‘b_1’ 
class=‘b’ 
class=‘b_2’ 
15
看個CSS 
margin: 邊界 
上下0px 左右對⿑齊 
置中 
float:left 
向左流動 
16
打開 
⾃自⼰己先玩玩看吧 
記得⽤用google chrome 檢查元素,任意更改數值或是刪掉 
css吧! 
17
來個流動的 
還記得Media Queries 嗎? 
@media ⽤用寬度 ( width ) 判斷 
18
來個流動的 
還記得Fluid Grid Layout 嗎? 
width 不再⽤用px 要⽤用%(百分⽐比) 
19
來個流動的 
電腦平板⼿手機 
20
打開 
看⼀一下CODE想⼀一下和不流動的有何不 
同 
記得⽤用google chrome 檢查元素,任意更改數值或是刪掉 
css吧! 
21
為什麼流動的地⽅方會出現px呢! 
22
⼩小技巧 
max-width: 960px; 
如果只有百分⽐比的話⼀一定會佔滿整個螢幕,必須要限 
定它最⼤大的尺⼨寸才⾏行 
23
結論 
在流動的世界裡,不能只有百分⽐比存在,要適時的使 
⽤用px去限制最⼤大或是最⼩小才⾏行! 
24
Flexible Media勒!!! 
25
Flexible Media 
⽂文字的⾃自適應:em,rem 
圖⽚片的⾃自適應: 
img { 
height: auto; 
max-width: 100%; 
} 
26
⾃自適應⽅方法百百種! 
技術也持續不斷推陳出新 
唯有不斷學習新知識,新技術 
27
⾃自適應⽅方法百百種! 
技術也持續不斷推陳出新 
唯有不斷學習新知識,新技術 
才能成為潮⼈人! 
28
學習資源 
CSS3 MEDIA QUERIES 詳細介紹與使⽤用⽅方法 
響應式網站範例 
網⾴頁設計該⽤用哪種字級單位px,em,rem? 
29
Upcoming SlideShare
Loading in …5
×

響應式網頁教學

13,291 views

Published on

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

Published in: Mobile

響應式網頁教學

  1. 1. RWD(Responsive Web Design) ncku Tien-Yang Wu 1
  2. 2. 什麼是響應式設計? 2
  3. 3. 什麼是響應式設計? 根據不同尺⼨寸螢幕⽽而有不同呈現⽅方式! 3
  4. 4. 舉個例⼦子 沒有RWS 有RWS 4
  5. 5. 舉個例⼦子 沒有RWS 有RWS 太潮了... 5
  6. 6. 為什麼要⽤用響應式? 不能因為潮就⽤用啊,太膚淺了 6
  7. 7. 來說說為啥要⽤用 1.⾏行動裝置世代來臨 2.開發成本較低 3.維護較為⽅方便 7
  8. 8. 來說說為啥要⽤用 1.⾏行動裝置世代來臨 2.開發成本較低 3.維護較為⽅方便 4.因為潮 8
  9. 9. 響應式三⼤大要素 Fluid Grid Layout Media Queries Flexible Media 流體佈局 媒體查詢 ⾃自適應媒體內容 9
  10. 10. Fluid Grid Layout 流體佈局 網站內容被切割成單元塊(像是可流動般) 10
  11. 11. Media Queries 媒體查詢 css3根據螢幕尺⼨寸判斷所載⼊入之css 11
  12. 12. Flexible Media ⾃自適應媒體內容 圖⽚片和⽂文字會隨螢幕尺⼨寸改變⽽而放⼤大or縮⼩小 12
  13. 13. 先來個不流動的排版 960px 40px 480px 13
  14. 14. 先來個不流動的排版 960px 40px 480px 960px 可以被2,3,4,5,6,8,10,12,15,16,20,24整除 14
  15. 15. 剖析DIV class=‘a’ class=‘b_1’ class=‘b’ class=‘b_2’ 15
  16. 16. 看個CSS margin: 邊界 上下0px 左右對⿑齊 置中 float:left 向左流動 16
  17. 17. 打開 ⾃自⼰己先玩玩看吧 記得⽤用google chrome 檢查元素,任意更改數值或是刪掉 css吧! 17
  18. 18. 來個流動的 還記得Media Queries 嗎? @media ⽤用寬度 ( width ) 判斷 18
  19. 19. 來個流動的 還記得Fluid Grid Layout 嗎? width 不再⽤用px 要⽤用%(百分⽐比) 19
  20. 20. 來個流動的 電腦平板⼿手機 20
  21. 21. 打開 看⼀一下CODE想⼀一下和不流動的有何不 同 記得⽤用google chrome 檢查元素,任意更改數值或是刪掉 css吧! 21
  22. 22. 為什麼流動的地⽅方會出現px呢! 22
  23. 23. ⼩小技巧 max-width: 960px; 如果只有百分⽐比的話⼀一定會佔滿整個螢幕,必須要限 定它最⼤大的尺⼨寸才⾏行 23
  24. 24. 結論 在流動的世界裡,不能只有百分⽐比存在,要適時的使 ⽤用px去限制最⼤大或是最⼩小才⾏行! 24
  25. 25. Flexible Media勒!!! 25
  26. 26. Flexible Media ⽂文字的⾃自適應:em,rem 圖⽚片的⾃自適應: img { height: auto; max-width: 100%; } 26
  27. 27. ⾃自適應⽅方法百百種! 技術也持續不斷推陳出新 唯有不斷學習新知識,新技術 27
  28. 28. ⾃自適應⽅方法百百種! 技術也持續不斷推陳出新 唯有不斷學習新知識,新技術 才能成為潮⼈人! 28
  29. 29. 學習資源 CSS3 MEDIA QUERIES 詳細介紹與使⽤用⽅方法 響應式網站範例 網⾴頁設計該⽤用哪種字級單位px,em,rem? 29

×