O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Próximos SlideShares
Carregando em…5
×

響應式網頁教學

13.378 visualizações

Publicada em

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

Publicada em: Celular

響應式網頁教學

  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

×