![響應式網頁(RWD)
viewport所有可設置之屬性
30
內容 描述
width [數字]或
device-width
檢視區寬度，單位為像素(px)
height [數字]或
device-height
檢視區高度，單位為像素(px)
initial-scale 介於0.0到10.0之數字 起始縮放比
maximum-scale 介於0.0到10.0之數字 操作放大上限
minimum-scale 介於0.0到10.0之數字 操作縮小下限
user-scalable 1或0(yes或no) 是否允許使用者操作縮放，
預設yes](https://image.slidesharecdn.com/html5css3share-150205100057-conversion-gate01/85/HTML5-CSS3-31-320.jpg)
![響應式網頁(RWD)
基本排版範例，row與col ( col-[target device]-[col size] )
每個row的col size加總需為12，md代表中尺寸螢幕
42
row1
row2
row3
col1 col2
col2
col2 col3
col1
col1](https://image.slidesharecdn.com/html5css3share-150205100057-conversion-gate01/85/HTML5-CSS3-43-320.jpg)
![響應式網頁(RWD)
排版系統target device分四類 ( col-[target device]-[col size] )
◦ lg (大尺寸螢幕-桌面)
◦ md (中尺寸螢幕-桌面)
◦ sm (小尺寸螢幕-平板)
◦ xs (特小尺寸螢幕-手機)
43](https://image.slidesharecdn.com/html5css3share-150205100057-conversion-gate01/85/HTML5-CSS3-44-320.jpg)
Uploaded byYing-Chun Cheng
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
本课程介绍了如何使用HTML5和CSS3设计手机友好的响应式网页，强调了移动设备的普及和多种屏幕尺寸对网站设计的影响。文中讨论了响应式网页设计的基本概念、相关技术及其优缺点，尤其是Bootstrap框架的利用。课程旨在帮助参与者掌握必要的网页设计技能，以适应日益增长的移动互联网需求。
利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹
- 1.
- 2. 大綱 行動化的趨勢 網站行動裝置友善調查 如何使網站行動裝置友善化 響應式網頁(ResponsiveWeb Design) ◦ HTML5+CSS3,Viewport, Media Query, Bootstrap 結語 Q&A 1
- 3. 課程目標 希望與課者透過此課程能 ◦ 了解行動裝置的流行與多螢幕尺寸為 網站設計帶來的挑戰 ◦ 了解HTML5響應式網頁(RWD)相關技 術與RWD的優缺點 ◦實際應用相關技術於適合的專案或產品 中 2
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. 響應式網頁(RWD) Ethan Marcotte 於2010年在A List Apart 雜誌的一篇文章中發明了術語 Responsive Web Design .net 雜誌將RWD列為 2012 年頂級網頁 設計趨勢的第二名 (漸進增強是第一名) (Why)各種裝置螢幕大小不一，固定大 小的網頁無法在所有裝置達到最佳呈現 效果 26
- 28.
- 29. 響應式網頁(RWD) 當網頁沒有指定檢視區時，行動瀏覽器 會以範圍介於 800 到1024 CSS 像素來 顯示網頁 28 裝置寬度(320) 網頁寬度(955) 附註: 螢幕寬度 ≠ 裝置寬度, 以iPhone5為例,螢幕實際解析度為1136 x 640 像素
- 30.
- 31. 響應式網頁(RWD) viewport所有可設置之屬性 30 內容 描述 width [數字]或 device-width 檢視區寬度，單位為像素(px) height[數字]或 device-height 檢視區高度，單位為像素(px) initial-scale 介於0.0到10.0之數字 起始縮放比 maximum-scale 介於0.0到10.0之數字 操作放大上限 minimum-scale 介於0.0到10.0之數字 操作縮小下限 user-scalable 1或0(yes或no) 是否允許使用者操作縮放， 預設yes
- 32. 響應式網頁(RWD) 2.CSS Media Query ◦可套用到 CSS 樣式的簡易篩選器，透過 Media Query即可輕鬆依據顯示內容的裝置 特性變更樣式(Responsive) 寬度 高度 橫向、直向 解析度 色彩 31
- 33.
- 34. 響應式網頁(RWD) CSS Media Query語法 33 屬性結果 min-width 任何超過查詢中指定寬度的瀏覽器都會套用規則。 max-width 任何未超過查詢中指定寬度的瀏覽器都會套用規則。 min-height 任何超過查詢中指定高度的瀏覽器都會套用規則。 max-height 任何未超過查詢中指定高度的瀏覽器都會套用規則。 orientation=portrait 任何高度大於或等於寬度的瀏覽器都會套用規則。 orientation=landscape 任何寬度大於高度的瀏覽器都會套用規則。 完整屬性參考 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries media_type: | all | handheld | print | projection | screen | tv | …
- 35.
- 36. 響應式網頁(RWD) RWD優缺點比較 35 設計各尺寸專屬網站 設計RWD網站 開發成本 中-高中 N份(HTML+CSS+程式) 1份(HTML+程式)+N份(CSS) 維護成本 高 中-低 各尺寸獨立修改 可統一修改 SEO 弱 強 多網址 單一網址 網站回應速度 快 慢 尺寸專屬HTML 1份HTML 適用複雜網頁 強 弱 尺寸專屬設計 Mobile First 舊瀏覽器支援 強 弱 IE8 hack,IE7以下no
- 37. 響應式網頁(RWD) 獨立網站 重效能、規模大 使用RWD 內容簡潔、易維護、富設計感 APP追求更好的體驗與功能 36 行動版提供為 獨立網站 台灣Yahoo、PChome、博客來、 mobile01、Google 、amazon…等 使用RWD iThome、台灣微軟、華碩、宏碁 、 Mister Donuts、KKBOX…等 APP 台灣Yahoo新聞、中央氣象局…等
- 38. 響應式網頁(RWD) Bootstrap - 支援RWD的CSS元件 ◦讓非CSS專業的程式設計師也可快速開發RWD網 頁 ◦ 視覺設計師可參考此元件的設計概念或基於此元 件設計RWD網頁 37
- 39. 響應式網頁(RWD) Bootstrap ◦ (2014/6)No.1 projecton GitHub with over 73,000 stars and more than 27,000 forks ◦ the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web 提供一組標準的HTML與CSS排版框架 供快速開發網頁雛型並支援RWD 38
- 40. 響應式網頁(RWD) Bootstrap目標在對常見的網站元素與互 動模式提供簡單與彈性的 HTML、CSS 與 Javascript基底，以幫助使用者提高 其生產力 39 圖片來源:http://images.payeasy.com.tw/products/6073/2486/2486675.jpg
- 41.
- 42. 響應式網頁(RWD) Grid System(格狀排版系統) Use .containerfor a responsive container 41
- 43. 響應式網頁(RWD) 基本排版範例，row與col ( col-[targetdevice]-[col size] ) 每個row的col size加總需為12，md代表中尺寸螢幕 42 row1 row2 row3 col1 col2 col2 col2 col3 col1 col1
- 44. 響應式網頁(RWD) 排版系統target device分四類 (col-[target device]-[col size] ) ◦ lg (大尺寸螢幕-桌面) ◦ md (中尺寸螢幕-桌面) ◦ sm (小尺寸螢幕-平板) ◦ xs (特小尺寸螢幕-手機) 43
- 45. 響應式網頁(RWD) 四類尺寸範圍 ◦ ≧1200 ◦ 1199~992 ◦991~768 ◦ ≦767 44 lg md sm xs
- 46.
- 47. 響應式網頁(RWD) RWD範例 (Phones (<768px)xs設定生效 ) 46
- 48.
- 49.
- 50. 響應式網頁(RWD) Responsive utilities ◦ 特定尺寸下顯示或隱藏 49 *= block,inline,inline-block
- 51.
- 52. 響應式網頁(RWD) Bootstrap並提供常見的網站元素與互動基底 51 CSS Components JavaScript TypographyGlyphicons Transitions Code Dropdowns Modal Tables Button groups Dropdown Forms Button dropdowns Scrollspy Buttons Input groups Tab Images Navs Tooltip Helper classes Navbar Popover Breadcrumbs Alert Pagination Button Labels Collapse Badges Carousel Jumbotron Affix Page header Thumbnails Alerts Progress bars Media object List group Panels Responsive embed Wells
- 53.
- 54. 響應式網頁(RWD) Bootstrap使用心得 ◦ 非視覺設計人員也可用Bootstrap快速 開發出RWD網頁 ◦ 只用BootstrapCSS套版畫面偏單調， 仍需視覺設計人員美化 適合雛型開發用 53
- 55. 響應式網頁(RWD) Bootstrap在RWD CSS設計方面可參考 的地方 ◦ 分大、中、小、特小四個尺寸 ◦每列12欄的排版方式 ◦ 對常見網站元素提供基底樣式 54
- 56.
- 57.
- 58. 結語 HTML5與網頁無障礙(Accessibility)技術 ◦ WAI-ARIA(Accessible RichInternet Applications) W3C制訂之動態網站(使用ajax,javascript)可用性標準 -2104/3/20 W3C Recommendation WAI-ARIA參考資料 ◦ https://developer.mozilla.org/en- US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ ◦ https://blog.othree.net/log/2010/10/10/introduction-to-wai-aria-1/ WAI-ARIA檢測工具 ◦ https://itaccessibility.illinois.edu/web-evaluation-tools 57
- 59.