SlideShare una empresa de Scribd logo
1 de 29
Descargar para leer sin conexión
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

Más contenido relacionado

Similar a 響應式網頁教學

RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13twMVC
 
twMVC#13 | RWD不是你想的那樣!
twMVC#13 | RWD不是你想的那樣!twMVC#13 | RWD不是你想的那樣!
twMVC#13 | RWD不是你想的那樣!twMVC
 
董大偉,Silverlight實務應用範例講座
董大偉,Silverlight實務應用範例講座董大偉,Silverlight實務應用範例講座
董大偉,Silverlight實務應用範例講座Chui-Wen Chiu
 
Architect 201003-by-info q
Architect 201003-by-info qArchitect 201003-by-info q
Architect 201003-by-info qgavin shaw
 
Responsive design on drupal
Responsive design on drupalResponsive design on drupal
Responsive design on drupalChris Wu
 
Ruby on rails部署
Ruby on rails部署Ruby on rails部署
Ruby on rails部署Deng Peng
 
Dreaming Infrastructure
Dreaming InfrastructureDreaming Infrastructure
Dreaming Infrastructurekyhpudding
 
Responsive web design的能與不能
Responsive web design的能與不能Responsive web design的能與不能
Responsive web design的能與不能Wan Jen Huang
 
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案 Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案 drewz lin
 
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹Ying-Chun Cheng
 
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化洧杰 廖
 
A new way to use Wikipedia for collaborative innovation"
 A new way to use Wikipedia for collaborative innovation" A new way to use Wikipedia for collaborative innovation"
A new way to use Wikipedia for collaborative innovation"TEDxFuzhou
 
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop洧杰 廖
 
Easy to recap AWS reinvent 2017
Easy to recap AWS reinvent 2017Easy to recap AWS reinvent 2017
Easy to recap AWS reinvent 2017Win Yu
 
hicloud PaaS 雲創平台 for java developer
hicloud PaaS 雲創平台 for java developerhicloud PaaS 雲創平台 for java developer
hicloud PaaS 雲創平台 for java developerhicloud-paas
 
響應式設計(RWD)與網站前瞻性設計
響應式設計(RWD)與網站前瞻性設計響應式設計(RWD)與網站前瞻性設計
響應式設計(RWD)與網站前瞻性設計Nowill Chang
 
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日twMVC
 
基于架构的开发模式
基于架构的开发模式基于架构的开发模式
基于架构的开发模式thinkinlamp
 

Similar a 響應式網頁教學 (20)

RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13
 
twMVC#13 | RWD不是你想的那樣!
twMVC#13 | RWD不是你想的那樣!twMVC#13 | RWD不是你想的那樣!
twMVC#13 | RWD不是你想的那樣!
 
董大偉,Silverlight實務應用範例講座
董大偉,Silverlight實務應用範例講座董大偉,Silverlight實務應用範例講座
董大偉,Silverlight實務應用範例講座
 
Rwd intro
Rwd introRwd intro
Rwd intro
 
Architect 201003-by-info q
Architect 201003-by-info qArchitect 201003-by-info q
Architect 201003-by-info q
 
Responsive design on drupal
Responsive design on drupalResponsive design on drupal
Responsive design on drupal
 
Ruby on rails部署
Ruby on rails部署Ruby on rails部署
Ruby on rails部署
 
RWD 響應式網頁
RWD 響應式網頁RWD 響應式網頁
RWD 響應式網頁
 
Dreaming Infrastructure
Dreaming InfrastructureDreaming Infrastructure
Dreaming Infrastructure
 
Responsive web design的能與不能
Responsive web design的能與不能Responsive web design的能與不能
Responsive web design的能與不能
 
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案 Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
 
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
 
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
 
A new way to use Wikipedia for collaborative innovation"
 A new way to use Wikipedia for collaborative innovation" A new way to use Wikipedia for collaborative innovation"
A new way to use Wikipedia for collaborative innovation"
 
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
 
Easy to recap AWS reinvent 2017
Easy to recap AWS reinvent 2017Easy to recap AWS reinvent 2017
Easy to recap AWS reinvent 2017
 
hicloud PaaS 雲創平台 for java developer
hicloud PaaS 雲創平台 for java developerhicloud PaaS 雲創平台 for java developer
hicloud PaaS 雲創平台 for java developer
 
響應式設計(RWD)與網站前瞻性設計
響應式設計(RWD)與網站前瞻性設計響應式設計(RWD)與網站前瞻性設計
響應式設計(RWD)與網站前瞻性設計
 
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
 
基于架构的开发模式
基于架构的开发模式基于架构的开发模式
基于架构的开发模式
 

Más de Tien-Yang (Aiden) Wu

Más de Tien-Yang (Aiden) Wu (14)

Hidden markov model
Hidden markov modelHidden markov model
Hidden markov model
 
Scalable machine learning
Scalable machine learningScalable machine learning
Scalable machine learning
 
沒有想像中簡單的簡單分類器 Knn
沒有想像中簡單的簡單分類器 Knn沒有想像中簡單的簡單分類器 Knn
沒有想像中簡單的簡單分類器 Knn
 
Scalable sentiment classification for big data analysis using naive bayes cla...
Scalable sentiment classification for big data analysis using naive bayes cla...Scalable sentiment classification for big data analysis using naive bayes cla...
Scalable sentiment classification for big data analysis using naive bayes cla...
 
Collaborative filtering
Collaborative filteringCollaborative filtering
Collaborative filtering
 
Collaborative Filtering Recommendation Algorithm based on Hadoop
Collaborative Filtering Recommendation Algorithm based on HadoopCollaborative Filtering Recommendation Algorithm based on Hadoop
Collaborative Filtering Recommendation Algorithm based on Hadoop
 
Parallel-kmeans
Parallel-kmeansParallel-kmeans
Parallel-kmeans
 
K means
K meansK means
K means
 
RDD
RDDRDD
RDD
 
Semantic ui教學
Semantic ui教學Semantic ui教學
Semantic ui教學
 
NoSQL & JSON
NoSQL & JSONNoSQL & JSON
NoSQL & JSON
 
Weebly上手教學
Weebly上手教學Weebly上手教學
Weebly上手教學
 
簡易爬蟲製作和Pttcrawler
簡易爬蟲製作和Pttcrawler簡易爬蟲製作和Pttcrawler
簡易爬蟲製作和Pttcrawler
 
Python簡介和多版本虛擬環境架設
Python簡介和多版本虛擬環境架設Python簡介和多版本虛擬環境架設
Python簡介和多版本虛擬環境架設
 

響應式網頁教學