Downloaded 902 times
![Meta Tag: Viewport
對瀏覽器說：viewport規則套用，寬度設定為device-width，且初始縮放數值為1
IE8或更舊的IE則可CDN javascript來解決：
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->](https://image.slidesharecdn.com/rwd-150104021158-conversion-gate02/85/RWD-27-320.jpg)
Uploaded byMarie Chang
深入淺出RWD自適應網頁設計
本文件介绍了响应式网页设计（RWD）的概念和优点，强调其在满足移动设备用户体验方面的重要性。同时，提及了 RWD 的潜在缺点以及解决方案，包括浏览器兼容性和性能问题。最后，提供了 RWD 的实施技术、工作流程和相关工具资源。
![Responsive Web Design [rebuild as design]](https://cdn.slidesharecdn.com/ss_thumbnails/webrebuildasdesign-130619064627-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
深入淺出RWD自適應網頁設計
- 1. A Guide to ResponsiveWeb Design 深入淺出自適應網頁設計 主講者：Marie Chang
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. 縮短開發不同螢幕裝置的時程和成本 = 1 WEB= 1 WEB+ 1 Native App for Mobile ( + 1 Native App for Pad ) $ 50,00,00 ↑ $ 10,00,00
- 9.
- 10.
- 11.
- 12. 1) 瀏覽器兼容的問題 2) 效能問題 IE8不支援media queries, IE6不支援max(min)-width, 這兩大項是RWD的CSS必用規則 解法：使用網路上能降級的js套件或多花心思自寫css hack 網站結構較複雜，通常有大量圖片或資源，即使符合行動裝置來流覽， 在行動頻寬下，等待下載的時間長，檔案也過大。 解法：RWD + Server Side Solution，透過伺服器端判斷裝置後調配 資源
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. 範例：4 col →2 col → 1 col
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. Meta Tag寫法 CSS MediaQueries 自適應的Grid 自適應的image 隱藏或顯示content 完成以上四點就是RWD!
- 26. Meta Tag: Viewport 沒設viewport有設viewport
- 27. Meta Tag: Viewport 對瀏覽器說：viewport規則套用，寬度設定為device-width，且初始縮放數值為1 IE8或更舊的IE則可CDNjavascript來解決： <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </script> <![endif]-->
- 28.
- 29. @media screen and(max-width: 980px) { /* style */ } @media screen and (max-width: 720px) { /* style */ } @media screen and (max-width: 480px) { /* style */ } Media Queries
- 30. Media Queries :Breakpoint @media screen and (min-device-width : 768px) and (max-device-width : 1024px) Device寫法：當螢幕寬度超過900像素時， class的背景是灰色的
- 31.
- 32. 自適應的image img { max-width:100%; } 基於效能(選擇性載入大圖)解決方案： 使用別人撰寫好的 rwd-images.js 搭配服用 最好讓圖片都隨著外圍容器(Grid)縮放
- 33. 隱藏/顯示content @media screen and(max-width: 980px) { .col { with: 23.4%; } } @media screen and (max-width: 720px) { .col { with: 23.4%; } } @media screen and (max-width: 480px) { .col { display: none; } }
- 34.
- 35.
- 36. Bootstrap，mobile web 或RWD前端框架 http://getbootstrap.com/
- 37.
- 38.
- 39. 框架必熟的撇步 1. 搞懂Grid System 2.從套用template開始著手 3. 熟悉常用的class name 4. 熟悉顏色規則 5. 既然有vertical，一定有horizontal 6. 既然有Left就會有right, center 7. 特效請愛用jQuery 相關Plugin
- 40.
- 41. Bootstrap好用工具與資源 Bootable Template 網站範例 BoostrapLanding page 登陸頁應用 Bootstrap 3 PSD 視覺設計psd檔 Bootstrap 3 Illustrator Template視覺設計ai檔 Free theme for Boostrape 免費樣版 Bootsnipp 現成小元件套用
- 42.
- 43. 原型/草圖工具 (為什麼要畫3次 Wireframe？) Responsive WebDesign Sketch Sheets http://balsamiq.com/ https://moqups.com 格線工具 http://simplegrid.info/ http://www.columnal.com/ SUSY 企劃和格線的好用工具
- 44. 測試工具 http://mattkersley.com/responsive/ (線上) http://www.responsinator.com/ (線上) OperaMobile Classic Emulator (安裝到電腦) 沒有太多實機能測試時的虛擬取代方案
- 45.