{"id":354,"date":"2026-01-10T08:28:01","date_gmt":"2026-01-10T08:28:01","guid":{"rendered":"https:\/\/notebook.raina.com.tw\/code\/?p=354"},"modified":"2026-01-12T04:43:57","modified_gmt":"2026-01-12T04:43:57","slug":"rwd-dynamic-grid-generation-system","status":"publish","type":"post","link":"https:\/\/notebook.raina.com.tw\/code\/rwd-dynamic-grid-generation-system\/","title":{"rendered":"\u3010\u7db2\u7ad9\u9aa8\u67b6\u3011RWD\u52d5\u614b\u683c\u7dda\u751f\u6210\u7cfb\u7d71\uff0c\u4e0d\u7ba15\u683c\u30017\u683c\u30019\u683c\u300110\u683c\u901a\u901a\u6c92\u554f\u984c\uff0cJS\u52d5\u614b\u8f09\u5165\uff0c\u4e0d\u7ba1\u591a\u5c11\u683c\u7dda\u90fd\u80fd\u5beb!\u4e00\u9375\u518d\u751f\u6210CSS\u7de8\u8b6f\u6a94!\u7c21\u55ae\u6a94\u6848\u5c0f"},"content":{"rendered":"\n

\u6084\u6084\u7a81\u7834\u958b\u767c\u7684\u9650\u5236<\/h2>\n\n\n\n

\u53d7\u9650\u65bc\u73fe\u6210\u768412\u683c\u7dda\u6846\u67b6\u7cfb\u7d71\u55ce?\u901a\u5e38\u5728\u958b\u767c\u6642\uff0c\u5fc5\u9808\u5373\u6642\uff0c\u80fd\u76f4\u63a5\u7528class\u5feb\u901f\u8a2d\u5b9a\u6700\u597d\u4e0d\u904e\uff0c\u4f46\u5982\u679c\u9047\u5230\u7f55\u898b\u7684\u683c\u7dda\u67b6\u69cb\uff0c\u5c31\u5fc5\u9808\u8df3\u56de\u81ea\u5df1\u5beb\uff0c\u6211\u5011\u751f\u6210\u4e00\u5957\u52d5\u614b\u7cfb\u7d71\uff0c\u4e0d\u7ba1\u591a\u5c11\u683c\u7dda\u90fd\u53ef\u4ee5\uff0c\u751a\u81f3\u8d85\u904e12\u683c\u7dda\u300115\u683c\u7dda\u300136\u683c\u7dda\u300148\u683c\u7dda\u4e5f\u901a\u901a\u6c92\u554f\u984c\u3002<\/p>\n\n\n\n

7\u683c\u7dda\u7684\u65e5\u66c6\u4e5f\u80fd\u8f15\u9b06\u641e\u5b9a\uff0c5\u683c\u7dda\u7684icon\u5c55\u793a\u4e5f\u5f88\u5bb9\u6613\u3002<\/p>\n\n\n\n

\u4f60\u4e0d\u9700\u8981\u4e00\u500b\u5c08\u5c6c\u7684\u7de8\u8b6f\u5668\uff0c\u4f7f\u7528JS\u52d5\u614b\u5373\u6642\u7121\u75db\u751f\u6210\uff0c\u5982\u679c\u5b8c\u6210\u5c08\u6848\u5f8c\u9084\u80fd\u6253\u5305CSS\uff0c\u8b93\u7528\u6236\u900f\u904e\u9023\u7ddaCSS\u4e0d\u7528\u5403\u700f\u89bd\u5668\u8cc7\u6e90\uff0c\u958b\u767c\u7528JS\uff0c\u5b8c\u5de5\u7528CSS\u3002<\/p>\n\n\n\n

\u6211\u5011\u66f4\u68d2\u7684\u5f0f\uff0c\u91dd\u5c0d\u9593\u8ddd\u4e5f\u80fd\u8a2d\u5b9a\u3001\u4e0a\u4e0b\u5de6\u53f3\u90fd\u53ef\u4ee5\u8f15\u9b06\u8a2d\u5b9a\u3002\u9019\u90fd\u662f\u76ee\u524d\u6846\u67b6\u6c92\u6709\u505a\u5230\u7684\u3002<\/p>\n\n\n\n

\u683c\u7dda\u7cfb\u7d71\u6bd4\u8f03<\/h2>\n\n\n\n
\u7279\u6027<\/th>\u50b3\u7d71\u6846\u67b6 (Bootstrap\/W3.CSS)<\/th>Raina Grid System<\/th><\/tr><\/thead>
\u683c\u7dda\u9650\u5236<\/strong><\/td>\u901a\u5e38\u9396\u5b9a 12 \u683c\u7dda (grid-12)<\/td>\u7121\u9650<\/strong> (\u53ef\u81ea\u8a02 row-5, row-7, row-100)<\/td><\/tr>
RWD \u5beb\u6cd5<\/strong><\/td>\u5206\u96e2\u5f0f (col-lg-4 col-md-6 col-12)<\/td>\u6574\u5408\u5f0f<\/strong> (col-040612 \u4e00\u78bc\u641e\u5b9a)<\/td><\/tr>
\u9593\u8ddd\u63a7\u5236<\/strong><\/td>\u9810\u8a2d\u7d1a\u8ddd (g-1, g-2, g-3)<\/td>\u50cf\u7d20\u7d1a<\/strong> (x17, y23 – \u4efb\u610f\u586b\u5beb)<\/td><\/tr>
\u6a94\u6848\u5927\u5c0f<\/strong><\/td>\u9700\u8f09\u5165\u5b8c\u6574 CSS \u5eab (100KB+)<\/td>\u6309\u9700\u751f\u6210<\/strong> (\u50c5\u751f\u6210\u6709\u7528\u5230\u7684 CSS\uff0c\u6975\u5c0f)<\/td><\/tr>
\u904b\u4f5c\u6a21\u5f0f<\/strong><\/td>\u9810\u5148\u5b9a\u7fa9 Class<\/td>\u81ea\u52d5\u7de8\u8b6f\u5668<\/strong> (\u6383\u63cf -> \u751f\u6210 -> \u532f\u51fa)<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"

\u6084\u6084\u7a81\u7834\u958b\u767c\u7684\u9650\u5236 \u53d7\u9650\u65bc\u73fe\u6210\u768412\u683c\u7dda\u6846\u67b6\u7cfb\u7d71\u55ce?\u901a\u5e38\u5728\u958b\u767c\u6642\uff0c\u5fc5\u9808\u5373\u6642\uff0c\u80fd\u76f4\u63a5\u7528class\u5feb\u901f\u8a2d\u5b9a\u6700\u597d\u4e0d\u904e […]<\/p>\n","protected":false},"author":1,"featured_media":356,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"\u3010\u7db2\u7ad9\u9aa8\u67b6\u3011RWD\u52d5\u614b\u683c\u7dda\u751f\u6210\u7cfb\u7d71\uff0c\u4e0d\u7ba15\u683c\u30017\u683c\u30019\u683c\u300110\u683c\u901a\u901a\u6c92\u554f\u984c\uff0cJS\u52d5\u614b\u8f09\u5165\uff0c\u4e0d\u7ba1\u591a\u5c11\u683c\u7dda\u90fd\u80fd\u5beb!\u4e00\u9375\u518d\u751f\u6210CSS\u7de8\u8b6f\u6a94!\u7c21\u55ae\u6a94\u6848\u5c0f - Raina\u8a31\u8a9e\u771f\u7684AI\u7a0b\u5f0f\u7b46\u8a18\u672c","description":"\u6084\u6084\u7a81\u7834\u958b\u767c\u7684\u9650\u5236 \u53d7\u9650\u65bc\u73fe\u6210\u768412\u683c\u7dda\u6846\u67b6\u7cfb\u7d71\u55ce?\u901a\u5e38\u5728\u958b\u767c\u6642\uff0c\u5fc5\u9808\u5373\u6642\uff0c\u80fd\u76f4\u63a5\u7528class\u5feb\u901f\u8a2d\u5b9a\u6700\u597d\u4e0d\u904e\uff0c\u4f46\u5982\u679c\u9047\u5230\u7f55\u898b\u7684\u683c\u7dda\u67b6\u69cb\uff0c\u5c31\u5fc5\u9808\u8df3\u56de\u81ea\u5df1\u5beb\uff0c\u6211\u5011\u751f\u6210\u4e00\u5957\u52d5\u614b\u7cfb\u7d71\uff0c\u4e0d\u7ba1\u591a\u5c11\u683c\u7dda\u90fd\u53ef\u4ee5\uff0c\u751a\u81f3\u8d85\u904e12\u683c\u7dda\u300115\u683c\u7dda\u300136\u683c\u7dda\u300148\u683c\u7dda\u4e5f\u901a\u901a\u6c92\u554f\u984c\u3002 7\u683c\u7dda\u7684\u65e5\u66c6\u4e5f\u80fd\u8f15\u9b06\u641e\u5b9a\uff0c5\u683c\u7dda\u7684icon\u5c55\u793a\u4e5f\u5f88\u5bb9\u6613\u3002 \u4f60"},"footnotes":""},"categories":[1],"tags":[30,11,29],"book":[31,15,19],"class_list":["post-354","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","tag-30","tag-11","tag-29","book-31","book-js-plug-in-development","book-web-visual-development-tools"],"blocksy_meta":[],"meta_box":{"Developmentfileread-permissions":"need-password","howpassword":"368943","ProgramFiles-SourceCode":"358","version_recode":[{"versionre_cord":"v1.0","version_img":"356","version_sp":"\u91dd\u5c0d\u683c\u7dda\u6846\u67b6\u3001\u7db2\u7ad9\u9aa8\u67b6\u52d5\u614b\u751f\u6210\u3002"}],"UseTeaching":[],"Implementationresults":[]},"_links":{"self":[{"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/posts\/354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/comments?post=354"}],"version-history":[{"count":0,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/posts\/354\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/media\/356"}],"wp:attachment":[{"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/media?parent=354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/categories?post=354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/tags?post=354"},{"taxonomy":"book","embeddable":true,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/book?post=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}