Enviar búsqueda
Cargar
響應式網頁教學
•
27 recomendaciones
•
14,929 vistas
Tien-Yang (Aiden) Wu
Seguir
響應式(Responsive Web Design)簡單講解 和程式碼實例
Leer menos
Leer más
Móvil
Denunciar
Compartir
Denunciar
Compartir
1 de 29
Descargar ahora
Descargar para leer sin conexión
Recomendados
마이크로 서비스 아키텍쳐 소개 및 구현 방법
마이크로 서비스 아키텍쳐 소개 및 구현 방법
Young Soo Lee
AWS Summit Seoul 2023 | 지능화되는 랜섬웨어 위협으로부터 지킬 것인가? 당할 것인가?
AWS Summit Seoul 2023 | 지능화되는 랜섬웨어 위협으로부터 지킬 것인가? 당할 것인가?
Amazon Web Services Korea
AWS 12월 웨비나 │성공적인 마이그레이션을 위한 클라우드 아키텍처 및 운영 고도화
AWS 12월 웨비나 │성공적인 마이그레이션을 위한 클라우드 아키텍처 및 운영 고도화
Amazon Web Services Korea
Metasynergy global
Metasynergy global
NitinChawla50
Private cloud network architecture (2018)
Private cloud network architecture (2018)
Gasida Seo
深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計
Marie Chang
Hyweb RWD & CMS develop scenario
Hyweb RWD & CMS develop scenario
Kai Fu Hsieh
RWD & SEO的藝術
RWD & SEO的藝術
Hitomi Yang
Más contenido relacionado
Similar a 響應式網頁教學
RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13
twMVC
twMVC#13 | RWD不是你想的那樣!
twMVC#13 | RWD不是你想的那樣!
twMVC
董大偉,Silverlight實務應用範例講座
董大偉,Silverlight實務應用範例講座
Chui-Wen Chiu
Rwd intro
Rwd intro
alansemmer
Architect 201003-by-info q
Architect 201003-by-info q
gavin shaw
Responsive design on drupal
Responsive design on drupal
Chris Wu
Ruby on rails部署
Ruby on rails部署
Deng Peng
RWD 響應式網頁
RWD 響應式網頁
彭其捷 Jack
Dreaming Infrastructure
Dreaming Infrastructure
kyhpudding
Responsive web design的能與不能
Responsive web design的能與不能
Wan Jen Huang
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
drewz lin
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
Ying-Chun Cheng
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
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
洧杰 廖
Easy to recap AWS reinvent 2017
Easy to recap AWS reinvent 2017
Win Yu
hicloud PaaS 雲創平台 for java developer
hicloud PaaS 雲創平台 for java developer
hicloud-paas
響應式設計(RWD)與網站前瞻性設計
響應式設計(RWD)與網站前瞻性設計
Nowill Chang
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
twMVC
基于架构的开发模式
基于架构的开发模式
thinkinlamp
Similar a 響應式網頁教學
(20)
RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13
twMVC#13 | RWD不是你想的那樣!
twMVC#13 | RWD不是你想的那樣!
董大偉,Silverlight實務應用範例講座
董大偉,Silverlight實務應用範例講座
Rwd intro
Rwd intro
Architect 201003-by-info q
Architect 201003-by-info q
Responsive design on drupal
Responsive design on drupal
Ruby on rails部署
Ruby on rails部署
RWD 響應式網頁
RWD 響應式網頁
Dreaming Infrastructure
Dreaming Infrastructure
Responsive web design的能與不能
Responsive web design的能與不能
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
A new way to use Wikipedia for collaborative innovation"
A new way to use Wikipedia for collaborative innovation"
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
Easy to recap AWS reinvent 2017
Easy to recap AWS reinvent 2017
hicloud PaaS 雲創平台 for java developer
hicloud PaaS 雲創平台 for java developer
響應式設計(RWD)與網站前瞻性設計
響應式設計(RWD)與網站前瞻性設計
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
基于架构的开发模式
基于架构的开发模式
Más de Tien-Yang (Aiden) Wu
Hidden markov model
Hidden markov model
Tien-Yang (Aiden) Wu
Scalable machine learning
Scalable machine learning
Tien-Yang (Aiden) Wu
沒有想像中簡單的簡單分類器 Knn
沒有想像中簡單的簡單分類器 Knn
Tien-Yang (Aiden) Wu
Scalable sentiment classification for big data analysis using naive bayes cla...
Scalable sentiment classification for big data analysis using naive bayes cla...
Tien-Yang (Aiden) Wu
Collaborative filtering
Collaborative filtering
Tien-Yang (Aiden) Wu
Collaborative Filtering Recommendation Algorithm based on Hadoop
Collaborative Filtering Recommendation Algorithm based on Hadoop
Tien-Yang (Aiden) Wu
Parallel-kmeans
Parallel-kmeans
Tien-Yang (Aiden) Wu
K means
K means
Tien-Yang (Aiden) Wu
RDD
RDD
Tien-Yang (Aiden) Wu
Semantic ui教學
Semantic ui教學
Tien-Yang (Aiden) Wu
NoSQL & JSON
NoSQL & JSON
Tien-Yang (Aiden) Wu
Weebly上手教學
Weebly上手教學
Tien-Yang (Aiden) Wu
簡易爬蟲製作和Pttcrawler
簡易爬蟲製作和Pttcrawler
Tien-Yang (Aiden) Wu
Python簡介和多版本虛擬環境架設
Python簡介和多版本虛擬環境架設
Tien-Yang (Aiden) Wu
Más de Tien-Yang (Aiden) Wu
(14)
Hidden markov model
Hidden markov model
Scalable machine learning
Scalable machine learning
沒有想像中簡單的簡單分類器 Knn
沒有想像中簡單的簡單分類器 Knn
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 filtering
Collaborative Filtering Recommendation Algorithm based on Hadoop
Collaborative Filtering Recommendation Algorithm based on Hadoop
Parallel-kmeans
Parallel-kmeans
K means
K means
RDD
RDD
Semantic ui教學
Semantic ui教學
NoSQL & JSON
NoSQL & JSON
Weebly上手教學
Weebly上手教學
簡易爬蟲製作和Pttcrawler
簡易爬蟲製作和Pttcrawler
Python簡介和多版本虛擬環境架設
Python簡介和多版本虛擬環境架設
響應式網頁教學
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
Descargar ahora