Rwd開發小工具
Download as PPTX, PDF2 likes448 views
本文件介绍了与响应式网页设计（RWD）相关的小工具和实用技巧，包括 Chrome 控制台的使用、网格系统的实现以及 Flexbox 的教学资源。文档通过实例和代码片段帮助开发者提高开发效率，并解决网格布局中的常见问题。每个章节涵盖了不同的主题，并提供了简要总结和问答。
Rwd開發小工具
- 1. RWD 開發小工具 By Sean Su
- 3. 3+ 1
- 8. Can I Use 8 Can I Use?
- 10. Chrome Console 10 %cconsole.log(‘%c 文字文字文字’, ‘CSS寫這’);
- 11. Chrome Console 11 document.designMode = ‘on’
- 14. Basic RWD Sample 14
- 15. Basic RWD Sample 15
- 16. Basic RWD Sample 16
- 17. Basic RWD Sample 17
- 18. Grid System 18 Grid System 網格系統
- 19. Grid System 19
- 21. 小結 21
- 23. “ 佛地魔： 7，是最強大的 魔法數字 Q：怎麼建出 1 排 7 格的？ 23
- 24. Grid 24 Grid System Grid Framework 翻譯：自己的網格自己寫
- 26. 小結 26
- 28. Grid Problem 28 商周.com：8 格 雜誌：10 格
- 30. The greatest invention of this century 30 Flex
- 34. 小結 34
Editor's Notes
- #3: 1 http://jsbin.com/?html,js,output 2 https://jsfiddle.net/ 3 https://codepen.io/
- #4: 範例 https://github.com/sean-su/food-check
- #7: 1 https://fakeimg.pl/ 2 https://placeholder.com/
- #8: https://chrome.google.com/webstore/detail/css3-generator/dmlgmehijaodgkkooghkknjjkddahmej
- #9: http://caniuse.com/#home
- #10: 進行分組：設計 + 後端 + 維運 一組
- #13: 網址後面加上?openExternalBrowser=1 這個參數，用 line 開啟網頁時，可不用webview開
- #14: 進行分組：設計 + 後端 + 維運 一組
- #19: 用雜誌頻道當範例 http://magazine.businessweekly.com.tw/
- #20: Bootstrap官網 http://getbootstrap.com/
- #21: 最多是12，因為12可以被很多數整除：1、2、3、4、6 範例 https://codepen.io/sean-su/pen/wqXBQP?editors=1000
- #22: Bootstrap3支援到 IE9 Bootstrap4支援到 IE10
- #26: 範例 https://codepen.io/sean-su/pen/Xadyxm
- #27: Lost 用了 CSS3 的計算calc，ie10 以下不支援
- #31: 變紅色、加底線、加粗、震一下、扭一下、再阧一下
- #34: 1 https://codepen.io/sean-su/full/VzyBre/ 2 http://flexboxfroggy.com/
- #35: Flex ie10 以下不支援。ie11支援，但有bug