Responsive design on drupal
- 1. Responsive Design on Drupal Chris Wu
- 2. F2E / Themer Site Builder
- 3. RESPONSIVE DESIGN? Reactive Design Adaptive Design Fluid Design Flexible Design Responsive Web Design
- 4. RWD 呼應式網?頁設計 響應式網?頁設計 ?自适应式网?页设计
- 6. 載具 / Devices
- 8. APP 截然不同的開發?方式 為不同裝置或平台個別開發 開發語?言或許不?止?一種 上稿系統可能不同* 維護更新成本較?高
- 13. MEDIA QUERIES 嗨！可以看看你的網站嗎？ 好啊！ 可以讓我知道你的螢幕多?大嗎？ 我的畫?面寬度是 768 px OK，提供你平板的樣式瀏覽網站 Tablet
- 14. DRUPAL 可以幫助我開發嗎？
- 15. THEME
- 16. AdaptiveThemes Zen Bootstrap Zurb Foundation
- 19. Tablet Portrait Mobile Landscape Mobile Portrait
- 20. LAYOUT
- 22. Tablet Landscape Tablet Portrait Mobile Wide Desktop
- 23. <img> img{ max-width: 100%; }
- 24. <form> input, select{ max-width: 100%; }
- 25. HTML5 type=“tel” type=“number” 迟测辫别=“别尘补颈濒”
- 26. For Developer ! Elements https://www.drupal.org/project/elements
- 27. FOR USER ! ! ! HTML5 Tools https://www.drupal.org/project/html5_tools
- 28. IMAGE
- 29. 螢幕尺?寸 VS 圖?片尺?寸
- 31. 叁合?一解决?方案
- 32. Image Style 核?心模組，圖?片裁切縮放 Picture 連結 Image Style 與 Breakpoints Breakpoints 設定載具分段點與解析度 圖?片的 Media Queries
- 33. 实际效果
- 34. BONUS: VIDEO!
- 35. Currently Supported Players ! YouTube Y Vimeo Y Blip.tv Y* Viddler Y* Kickstarter Y*
- 36. THANK YOU! ?