[{"data":1,"prerenderedAt":224},["ShallowReactive",2],{"post-\u002Fblog\u002Fcss-magic":3,"post-surroundings":190},{"id":4,"title":5,"body":6,"date":176,"description":177,"desktopCover":26,"extension":178,"isPopular":179,"meta":180,"mobileCover":181,"navigation":182,"path":183,"seo":184,"slug":183,"stem":185,"tags":186,"__hash__":189},"blog\u002Fblog\u002Fcss-magic.md","CSS 魔法大揭密：排版與設計的三大關鍵技巧",{"type":7,"value":8,"toc":169},"minimark",[9,20,149,152],[10,11,12,16],"content-space",{},[13,14,15],"h2",{"id":15},"前言",[17,18,19],"p",{},"CSS 不只是顏色、字體和排版，更是塑造使用者體驗的關鍵工具。掌握正確的排版與設計技巧，能讓你的網頁更加流暢、美觀，也更具可維護性。以下分享三大實戰技巧，幫助你在專案中快速落地。",[10,21,22,27,30,63,97,137],{},[23,24],"prose-img",{"alt":25,"src":26},"前言圖片","\u002Fdesktop\u002Fblog\u002Fcss-magic.webp",[13,28,29],{"id":29},"三大關鍵技巧",[31,32,33,38,48,53],"content-block",{},[34,35,37],"h3",{"id":36},"技巧一統一基底-css-reset-與自訂預設樣式","技巧一：統一基底 — CSS Reset 與自訂預設樣式",[17,39,40,44,47],{},[41,42,43],"strong",{},"為何重要",[45,46],"br",{},"\n瀏覽器預設的 margin、padding 和版型各有差異，若不先重置，跨瀏覽器的差異會讓排版大亂。",[17,49,50],{},[41,51,52],{},"建議做法",[54,55,56,60],"ul",{},[57,58,59],"li",{},"在專案起手就導入 Normalize.css 或自訂 Reset 規則，重置常見元素的預設樣式。",[57,61,62],{},"使用全域變數（CSS 變數）設定色彩、間距、字體等基底值，確保設計一致性。",[31,64,65,69,76,80],{},[34,66,68],{"id":67},"技巧二彈性排版-深入-flexbox-與-grid","技巧二：彈性排版 — 深入 Flexbox 與 Grid",[17,70,71,73,75],{},[41,72,43],{},[45,74],{},"\nFlexbox 擅長一維佈局（橫\u002F縱向排列），Grid 則可實現複雜的二維網格，兩者結合能應對絕大部分排版需求。",[17,77,78],{},[41,79,52],{},[54,81,82,85],{},[57,83,84],{},"練習常見佈局案例：水平\u002F垂直置中、等寬欄位、動態換行卡片等。",[57,86,87,88,92,93,96],{},"使用 Grid 的 ",[89,90,91],"code",{},"grid-template-areas"," 和 ",[89,94,95],{},"minmax()","，快速搭出彈性網格。",[31,98,99,103,110,114],{},[34,100,102],{"id":101},"技巧三響應式優化-css-變數與媒體查詢","技巧三：響應式優化 — CSS 變數與媒體查詢",[17,104,105,107,109],{},[41,106,43],{},[45,108],{},"\n在各種裝置上都能維持良好排版，才能提供一致的使用者體驗。",[17,111,112],{},[41,113,52],{},[54,115,116,123],{},[57,117,118,119,122],{},"將常用斷點定義為 CSS 變數（如 ",[89,120,121],{},"--bp-md: 768px","），在 media query 中重複使用。",[57,124,125,126,129,130,129,133,136],{},"利用 ",[89,127,128],{},"clamp()","、",[89,131,132],{},"min()",[89,134,135],{},"max()"," 實現 fluid typography 和 fluid spacing，減少過多的斷點判斷。",[138,139,140],"blockquote",{},[17,141,142,145,146,148],{},[41,143,144],{},"小結","：",[45,147],{},"\n先從 Reset 和統一基底著手，再靈活運用 Flexbox\u002FGrid 佈局，最後以變數與流體單位優化響應式，三步驟就能讓你的 CSS 排版與設計更上一層樓。",[13,150,151],{"id":151},"延伸閱讀",[54,153,154,159,164],{},[57,155,156],{},[41,157,158],{},"CSS 進階排版技巧：掌握 Grid Area 與 subgrid",[57,160,161],{},[41,162,163],{},"Tailwind CSS 魔法秘籍：快速打造設計系統",[57,165,166],{},[41,167,168],{},"響應式設計實戰：fluid typography 範例與技巧",{"title":170,"searchDepth":171,"depth":171,"links":172},"",2,[173,174,175],{"id":15,"depth":171,"text":15},{"id":29,"depth":171,"text":29},{"id":151,"depth":171,"text":151},"2024-09-03","在瀏覽器畫面上實現各種精美介面，一直是前端開發充滿成就感的部分。但當面臨複雜的佈局需求或是響應式設計時，往往讓人抓破頭皮。這篇文章想跟大家分享我在實務專案中累積的三大技巧，幫助你更有效率地駕馭 CSS，打造兼具美感與功能性的網頁。","md",false,{},"\u002Fmobile\u002Fblog\u002Fcss-magic.webp",true,"\u002Fblog\u002Fcss-magic",{"title":5,"description":177},"blog\u002Fcss-magic",[187,188],"CSS設計","視覺體驗","Y7dvwgfNHK6t84NjZq7-xZQF0Yd_Po9YMA5kAlE2lWg",[191,194,197,200,201,204,207,210,213,216,219,221],{"slug":192,"path":192,"date":193},"\u002Fblog\u002Fstart-from-scratch","2024-10-21",{"slug":195,"path":195,"date":196},"\u002Fblog\u002Freact-intro","2024-10-11",{"slug":198,"path":198,"date":199},"\u002Fblog\u002Fgood-resume","2024-09-07",{"slug":183,"path":183,"date":176},{"slug":202,"path":202,"date":203},"\u002Fblog\u002Fmental-journey","2024-07-09",{"slug":205,"path":205,"date":206},"\u002Fblog\u002Fjob-interview","2024-07-08",{"slug":208,"path":208,"date":209},"\u002Fblog\u002Fvue3-composition-api","2024-06-29",{"slug":211,"path":211,"date":212},"\u002Fblog\u002Fgit","2024-05-04",{"slug":214,"path":214,"date":215},"\u002Fblog\u002Fseo","2024-05-01",{"slug":217,"path":217,"date":218},"\u002Fblog\u002Fautomation","2024-02-17",{"slug":220,"path":220,"date":218},"\u002Fblog\u002Ftypescript",{"slug":222,"path":222,"date":223},"\u002Fblog\u002Funit-test","2024-02-07",1793785242274]