Submit Search
Upload
響應式網頁教學
•
27 likes
•
14,929 views
Tien-Yang (Aiden) Wu
Follow
響應式(Responsive Web Design)簡單講解 和程式碼實例
Read less
Read more
Mobile
Report
Share
Report
Share
1 of 29
Download now
Download to read offline
Recommended
深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計
Marie Chang
Basics for understanding the cloud
Basics for understanding the cloud
재성 고
성공적인 하이브리드 클라우드를 위한 레드햇의 전략
성공적인 하이브리드 클라우드를 위한 레드햇의 전략
rockplace
【D3 公開用】ドメイン駆動設計とscala 〜既存プロジェクトへの適用〜
【D3 公開用】ドメイン駆動設計とscala 〜既存プロジェクトへの適用〜
dcubeio
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
Yoshinori OHTA
نحو تخطيط مدن أكثر إستدامة | Amman Institute
نحو تخطيط مدن أكثر إستدامة | Amman Institute
Amman Institute
Announcing AWS Shield - Protect Web Applications from DDoS Attacks
Announcing AWS Shield - Protect Web Applications from DDoS Attacks
Amazon Web Services
VMware Tanzu Kubernetes Connect
VMware Tanzu Kubernetes Connect
VMware Tanzu
Recommended
深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計
Marie Chang
Basics for understanding the cloud
Basics for understanding the cloud
재성 고
성공적인 하이브리드 클라우드를 위한 레드햇의 전략
성공적인 하이브리드 클라우드를 위한 레드햇의 전략
rockplace
【D3 公開用】ドメイン駆動設計とscala 〜既存プロジェクトへの適用〜
【D3 公開用】ドメイン駆動設計とscala 〜既存プロジェクトへの適用〜
dcubeio
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
アクセシビリティvsセキュリティ ~こんな対策はいらない!~
Yoshinori OHTA
نحو تخطيط مدن أكثر إستدامة | Amman Institute
نحو تخطيط مدن أكثر إستدامة | Amman Institute
Amman Institute
Announcing AWS Shield - Protect Web Applications from DDoS Attacks
Announcing AWS Shield - Protect Web Applications from DDoS Attacks
Amazon Web Services
VMware Tanzu Kubernetes Connect
VMware Tanzu Kubernetes Connect
VMware Tanzu
재테크 2주일만 하면 신상희만큼 한다!
재테크 2주일만 하면 신상희만큼 한다!
SANGHEE SHIN
An Introduction To Server Virtualisation
An Introduction To Server Virtualisation
Alan McSweeney
十二項架構設計原則
十二項架構設計原則
Philip Zheng
1. 아키텍쳐 설계 프로세스
1. 아키텍쳐 설계 프로세스
Terry Cho
AcademyCloudFoundations_Module_00.pptx
AcademyCloudFoundations_Module_00.pptx
pepe790455
AWS Blackbelt 2015シリーズ Amazon EC2 Container Service (Amazon ECS)
AWS Blackbelt 2015シリーズ Amazon EC2 Container Service (Amazon ECS)
Amazon Web Services Japan
再考、3つの仮想デスクトップイメージ管理と比較
再考、3つの仮想デスクトップイメージ管理と比較
Citrix Systems Japan
AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저
AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저
Amazon Web Services Korea
[한국IBM] ServiceNow로 IT운영관리 최적화!
[한국IBM] ServiceNow로 IT운영관리 최적화!
Sejeong Kim 김세정
Etude de la virtualisation
Etude de la virtualisation
Antoine Benkemoun
Architectural Design in Arabic book 5 - التصميم المعمارى بالعربى - كتاب 5
Architectural Design in Arabic book 5 - التصميم المعمارى بالعربى - كتاب 5
Galala University
Azure backup v0.7
Azure backup v0.7
Luca Mauri
الاسكان في الدول النامية
الاسكان في الدول النامية
Rania Nasr Eldin
[애플리케이션 현대화 및 개발] 클라우드를 통한 현대적 애플리케이션 디자인 및 구축 패턴 - 윤석찬, AWS 수석 테크 에반젤리스트
[애플리케이션 현대화 및 개발] 클라우드를 통한 현대적 애플리케이션 디자인 및 구축 패턴 - 윤석찬, AWS 수석 테크 에반젤리스트
Amazon Web Services Korea
التخطيط العمراني في العراق
التخطيط العمراني في العراق
Amman Institute
[カタログ]Veeam backup & replication エディション比較
[カタログ]Veeam backup & replication エディション比較
株式会社クライム
MTのスケールアップパターン with AWS
MTのスケールアップパターン with AWS
Yasuhiro Araki, Ph.D
التنسيق الحضري Building Laws
التنسيق الحضري Building Laws
Ahmed SHoukry ELhfnawy
دراسة مشروع اسكان - تصميم معماري4 - سنة3 Housing
دراسة مشروع اسكان - تصميم معماري4 - سنة3 Housing
Ibrahem Qasim
Amazon S3 및 Elastic Beanstalk을 활용한 Wordpress 웹 사이트 구축하기 (윤석찬) - AWS 월간 웨비나
Amazon S3 및 Elastic Beanstalk을 활용한 Wordpress 웹 사이트 구축하기 (윤석찬) - AWS 월간 웨비나
Amazon Web Services Korea
Hyweb RWD & CMS develop scenario
Hyweb RWD & CMS develop scenario
Kai Fu Hsieh
RWD & SEO的藝術
RWD & SEO的藝術
Hitomi Yang
More Related Content
What's hot
재테크 2주일만 하면 신상희만큼 한다!
재테크 2주일만 하면 신상희만큼 한다!
SANGHEE SHIN
An Introduction To Server Virtualisation
An Introduction To Server Virtualisation
Alan McSweeney
十二項架構設計原則
十二項架構設計原則
Philip Zheng
1. 아키텍쳐 설계 프로세스
1. 아키텍쳐 설계 프로세스
Terry Cho
AcademyCloudFoundations_Module_00.pptx
AcademyCloudFoundations_Module_00.pptx
pepe790455
AWS Blackbelt 2015シリーズ Amazon EC2 Container Service (Amazon ECS)
AWS Blackbelt 2015シリーズ Amazon EC2 Container Service (Amazon ECS)
Amazon Web Services Japan
再考、3つの仮想デスクトップイメージ管理と比較
再考、3つの仮想デスクトップイメージ管理と比較
Citrix Systems Japan
AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저
AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저
Amazon Web Services Korea
[한국IBM] ServiceNow로 IT운영관리 최적화!
[한국IBM] ServiceNow로 IT운영관리 최적화!
Sejeong Kim 김세정
Etude de la virtualisation
Etude de la virtualisation
Antoine Benkemoun
Architectural Design in Arabic book 5 - التصميم المعمارى بالعربى - كتاب 5
Architectural Design in Arabic book 5 - التصميم المعمارى بالعربى - كتاب 5
Galala University
Azure backup v0.7
Azure backup v0.7
Luca Mauri
الاسكان في الدول النامية
الاسكان في الدول النامية
Rania Nasr Eldin
[애플리케이션 현대화 및 개발] 클라우드를 통한 현대적 애플리케이션 디자인 및 구축 패턴 - 윤석찬, AWS 수석 테크 에반젤리스트
[애플리케이션 현대화 및 개발] 클라우드를 통한 현대적 애플리케이션 디자인 및 구축 패턴 - 윤석찬, AWS 수석 테크 에반젤리스트
Amazon Web Services Korea
التخطيط العمراني في العراق
التخطيط العمراني في العراق
Amman Institute
[カタログ]Veeam backup & replication エディション比較
[カタログ]Veeam backup & replication エディション比較
株式会社クライム
MTのスケールアップパターン with AWS
MTのスケールアップパターン with AWS
Yasuhiro Araki, Ph.D
التنسيق الحضري Building Laws
التنسيق الحضري Building Laws
Ahmed SHoukry ELhfnawy
دراسة مشروع اسكان - تصميم معماري4 - سنة3 Housing
دراسة مشروع اسكان - تصميم معماري4 - سنة3 Housing
Ibrahem Qasim
Amazon S3 및 Elastic Beanstalk을 활용한 Wordpress 웹 사이트 구축하기 (윤석찬) - AWS 월간 웨비나
Amazon S3 및 Elastic Beanstalk을 활용한 Wordpress 웹 사이트 구축하기 (윤석찬) - AWS 월간 웨비나
Amazon Web Services Korea
What's hot
(20)
재테크 2주일만 하면 신상희만큼 한다!
재테크 2주일만 하면 신상희만큼 한다!
An Introduction To Server Virtualisation
An Introduction To Server Virtualisation
十二項架構設計原則
十二項架構設計原則
1. 아키텍쳐 설계 프로세스
1. 아키텍쳐 설계 프로세스
AcademyCloudFoundations_Module_00.pptx
AcademyCloudFoundations_Module_00.pptx
AWS Blackbelt 2015シリーズ Amazon EC2 Container Service (Amazon ECS)
AWS Blackbelt 2015シリーズ Amazon EC2 Container Service (Amazon ECS)
再考、3つの仮想デスクトップイメージ管理と比較
再考、3つの仮想デスクトップイメージ管理と比較
AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저
AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저
[한국IBM] ServiceNow로 IT운영관리 최적화!
[한국IBM] ServiceNow로 IT운영관리 최적화!
Etude de la virtualisation
Etude de la virtualisation
Architectural Design in Arabic book 5 - التصميم المعمارى بالعربى - كتاب 5
Architectural Design in Arabic book 5 - التصميم المعمارى بالعربى - كتاب 5
Azure backup v0.7
Azure backup v0.7
الاسكان في الدول النامية
الاسكان في الدول النامية
[애플리케이션 현대화 및 개발] 클라우드를 통한 현대적 애플리케이션 디자인 및 구축 패턴 - 윤석찬, AWS 수석 테크 에반젤리스트
[애플리케이션 현대화 및 개발] 클라우드를 통한 현대적 애플리케이션 디자인 및 구축 패턴 - 윤석찬, AWS 수석 테크 에반젤리스트
التخطيط العمراني في العراق
التخطيط العمراني في العراق
[カタログ]Veeam backup & replication エディション比較
[カタログ]Veeam backup & replication エディション比較
MTのスケールアップパターン with AWS
MTのスケールアップパターン with AWS
التنسيق الحضري Building Laws
التنسيق الحضري Building Laws
دراسة مشروع اسكان - تصميم معماري4 - سنة3 Housing
دراسة مشروع اسكان - تصميم معماري4 - سنة3 Housing
Amazon S3 및 Elastic Beanstalk을 활용한 Wordpress 웹 사이트 구축하기 (윤석찬) - AWS 월간 웨비나
Amazon S3 및 Elastic Beanstalk을 활용한 Wordpress 웹 사이트 구축하기 (윤석찬) - AWS 월간 웨비나
Similar to 響應式網頁教學
Hyweb RWD & CMS develop scenario
Hyweb RWD & CMS develop scenario
Kai Fu Hsieh
RWD & SEO的藝術
RWD & SEO的藝術
Hitomi Yang
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
Similar to 響應式網頁教學
(20)
Hyweb RWD & CMS develop scenario
Hyweb RWD & CMS develop scenario
RWD & SEO的藝術
RWD & SEO的藝術
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)與網站前瞻性設計
More from 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
More from 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
Download now