[{"data":1,"prerenderedAt":268},["ShallowReactive",2],{"content-/guide/grid-system":3,"related-guide":236},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":230,"_id":231,"_source":232,"_file":233,"_stem":234,"_extension":235},"/guide/grid-system","guide",false,"","网格系统","使用网格系统创建整齐的布局","网格系统, 栅栏系统, 布局, HTMLPAGE","HTMLPAGE","2025-11-27","设计","/content-images/guide/guide.jpg",{"type":16,"children":17,"toc":218},"root",[18,25,31,38,45,70,76,99,105,128,134,157,163,186,192,205,209],{"type":19,"tag":20,"props":21,"children":22},"element","h1",{"id":8},[23],{"type":24,"value":8},"text",{"type":19,"tag":26,"props":27,"children":28},"p",{},[29],{"type":24,"value":30},"使用网格系统快速创建对齐和谐的页面布局。",{"type":19,"tag":32,"props":33,"children":35},"h2",{"id":34},"网格基础",[36],{"type":24,"value":37},"📌 网格基础",{"type":19,"tag":39,"props":40,"children":42},"h3",{"id":41},"_1-网格类型",[43],{"type":24,"value":44},"1. 网格类型",{"type":19,"tag":46,"props":47,"children":48},"ul",{},[49,55,60,65],{"type":19,"tag":50,"props":51,"children":52},"li",{},[53],{"type":24,"value":54},"12 列网格",{"type":19,"tag":50,"props":56,"children":57},{},[58],{"type":24,"value":59},"24 列网格",{"type":19,"tag":50,"props":61,"children":62},{},[63],{"type":24,"value":64},"自定义列数",{"type":19,"tag":50,"props":66,"children":67},{},[68],{"type":24,"value":69},"流体网格",{"type":19,"tag":39,"props":71,"children":73},{"id":72},"_2-网格参数",[74],{"type":24,"value":75},"2. 网格参数",{"type":19,"tag":46,"props":77,"children":78},{},[79,84,89,94],{"type":19,"tag":50,"props":80,"children":81},{},[82],{"type":24,"value":83},"列宽",{"type":19,"tag":50,"props":85,"children":86},{},[87],{"type":24,"value":88},"间距 (gutter)",{"type":19,"tag":50,"props":90,"children":91},{},[92],{"type":24,"value":93},"外边距",{"type":19,"tag":50,"props":95,"children":96},{},[97],{"type":24,"value":98},"断点设置",{"type":19,"tag":39,"props":100,"children":102},{"id":101},"_3-响应式适配",[103],{"type":24,"value":104},"3. 响应式适配",{"type":19,"tag":46,"props":106,"children":107},{},[108,113,118,123],{"type":19,"tag":50,"props":109,"children":110},{},[111],{"type":24,"value":112},"移动 (\u003C 768px)",{"type":19,"tag":50,"props":114,"children":115},{},[116],{"type":24,"value":117},"平板 (768px - 1024px)",{"type":19,"tag":50,"props":119,"children":120},{},[121],{"type":24,"value":122},"桌面 (>1024px)",{"type":19,"tag":50,"props":124,"children":125},{},[126],{"type":24,"value":127},"大屏 (>1920px)",{"type":19,"tag":32,"props":129,"children":131},{"id":130},"网格使用",[132],{"type":24,"value":133},"🎯 网格使用",{"type":19,"tag":46,"props":135,"children":136},{},[137,142,147,152],{"type":19,"tag":50,"props":138,"children":139},{},[140],{"type":24,"value":141},"创建对齐的布局",{"type":19,"tag":50,"props":143,"children":144},{},[145],{"type":24,"value":146},"快速调整比例",{"type":19,"tag":50,"props":148,"children":149},{},[150],{"type":24,"value":151},"响应式适配",{"type":19,"tag":50,"props":153,"children":154},{},[155],{"type":24,"value":156},"保持间距一致",{"type":19,"tag":32,"props":158,"children":160},{"id":159},"最佳实践",[161],{"type":24,"value":162},"💡 最佳实践",{"type":19,"tag":46,"props":164,"children":165},{},[166,171,176,181],{"type":19,"tag":50,"props":167,"children":168},{},[169],{"type":24,"value":170},"选择合适的列数",{"type":19,"tag":50,"props":172,"children":173},{},[174],{"type":24,"value":175},"保持一致的间距",{"type":19,"tag":50,"props":177,"children":178},{},[179],{"type":24,"value":180},"充分利用响应式",{"type":19,"tag":50,"props":182,"children":183},{},[184],{"type":24,"value":185},"测试各种屏幕",{"type":19,"tag":32,"props":187,"children":189},{"id":188},"相关资源",[190],{"type":24,"value":191},"🔗 相关资源",{"type":19,"tag":46,"props":193,"children":194},{},[195],{"type":19,"tag":50,"props":196,"children":197},{},[198],{"type":19,"tag":199,"props":200,"children":202},"a",{"href":201},"/guide/responsive-design.md",[203],{"type":24,"value":204},"响应式设计",{"type":19,"tag":206,"props":207,"children":208},"hr",{},[],{"type":19,"tag":26,"props":210,"children":211},{},[212],{"type":19,"tag":213,"props":214,"children":215},"em",{},[216],{"type":24,"value":217},"网格系统是专业布局的基础。",{"title":7,"searchDepth":219,"depth":219,"links":220},3,[221,227,228,229],{"id":34,"depth":222,"text":37,"children":223},2,[224,225,226],{"id":41,"depth":219,"text":44},{"id":72,"depth":219,"text":75},{"id":101,"depth":219,"text":104},{"id":130,"depth":222,"text":133},{"id":159,"depth":222,"text":162},{"id":188,"depth":222,"text":191},"markdown","content:guide:grid-system.md","content","guide/grid-system.md","guide/grid-system","md",[237,249,260],{"_path":238,"_dir":239,"_draft":6,"_partial":6,"_locale":7,"title":240,"description":241,"keywords":242,"author":11,"date":243,"category":244,"image":245,"_type":230,"_id":246,"_source":232,"_file":247,"_stem":248,"_extension":235},"/blog/accessibility-guidelines","blog","无障碍设计指南","WCAG 标准和无障碍设计最佳实践","无障碍设计指南, Blog, HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg","content:blog:accessibility-guidelines.md","blog/accessibility-guidelines.md","blog/accessibility-guidelines",{"_path":250,"_dir":239,"_draft":6,"_partial":6,"_locale":7,"title":251,"description":252,"keywords":253,"author":254,"date":255,"category":256,"image":245,"_type":230,"_id":257,"_source":232,"_file":258,"_stem":259,"_extension":235},"/blog/accessible-ux-research-guide","无障碍用户研究完全指南：从规划到实施的每一步","深入了解如何进行包容性的用户体验研究，确保残障用户的声音被听见，让产品真正为所有人而设计","用户研究, 无障碍设计, 包容设计, UX研究, 残障用户, 无障碍访问","HTMLPAGE 内容团队","2025-12-01","无障碍与设计","content:blog:accessible-ux-research-guide.md","blog/accessible-ux-research-guide.md","blog/accessible-ux-research-guide",{"_path":261,"_dir":239,"_draft":6,"_partial":6,"_locale":7,"title":262,"description":263,"keywords":264,"author":11,"date":243,"category":244,"image":245,"_type":230,"_id":265,"_source":232,"_file":266,"_stem":267,"_extension":235},"/blog/react-hooks-guide","React Hooks 实战指南","深入理解 React Hooks，包括 useState、useEffect、自定义 Hooks 等","React Hooks 实战指南, Blog, HTMLPAGE","content:blog:react-hooks-guide.md","blog/react-hooks-guide.md","blog/react-hooks-guide",1774945278866]