Downloaded 24 times
Uploaded by翔宇 蘇
Rwd開發小工具
本文件介绍了与响应式网页设计（RWD）相关的小工具和实用技巧，包括 Chrome 控制台的使用、网格系统的实现以及 Flexbox 的教学资源。文档通过实例和代码片段帮助开发者提高开发效率，并解决网格布局中的常见问题。每个章节涵盖了不同的主题，并提供了简要总结和问答。
Rwd開發小工具
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. Can I Use8 Can I Use?
- 9.
- 10. Chrome Console 10 %cconsole.log(‘%c文字文字文字’, ‘CSS寫這’);
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. Grid System 18 GridSystem 網格系統
- 19.
- 20.
- 21.
- 22.
- 23. “ 佛地魔： 7，是最強大的 魔法數字 Q：怎麼建出 1 排7 格的？ 23
- 24. Grid 24 Grid System Grid Framework 翻譯：自己的網格自己寫
- 25.
- 26.
- 27.
- 28. Grid Problem 28 商周.com：8格 雜誌：10 格
- 29.
- 30. The greatest inventionof this century 30 Flex
- 31.
- 32.
- 33.
- 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