[{"data":1,"prerenderedAt":170},["ShallowReactive",2],{"content:\u002Farticles\u002Fsmall-css":3,"surround:\u002Farticles\u002Fsmall-css":158},{"id":4,"title":5,"body":6,"categories":131,"date":133,"description":134,"draft":135,"extension":136,"image":137,"meta":138,"navigation":140,"path":141,"permalink":141,"published":142,"readingTime":143,"recommend":148,"references":142,"seo":149,"sitemap":150,"stem":151,"tags":152,"type":155,"updated":156,"__hash__":157},"content\u002Fposts\u002F2026\u002Fsmall-css.md","把复杂的事，写成简单的代码",{"type":7,"value":8,"toc":123},"minimark",[9,16,19,23,26,37,40,43,46,52,55,58,61,117,120],[10,11,12],"blockquote",{},[13,14,15],"p",{},"本文为 mieka 博客的原创示例内容，可替换为自己的文章。",[13,17,18],{},"一个页面看起来简单，背后往往有许多选择。布局的边界怎么处理，长标题会不会撑开卡片，窄屏时哪些信息应该先出现，这些小问题决定了使用起来是否顺手。",[20,21,22],"h2",{"id":22},"从内容出发",[13,24,25],{},"假设我们要放置一组文章卡片。与其先写一堆设备断点，不如让浏览器根据容器的宽度决定列数。",[27,28,34],"pre",{"className":29,"code":31,"language":32,"meta":33},[30],"language-css",".article-grid {\n  display: grid;\n  grid-template-columns: repeat(\n    auto-fit,\n    minmax(min(100%, 18rem), 1fr)\n  );\n  gap: 1.25rem;\n}\n","css","",[35,36,31],"code",{"__ignoreMap":33},[13,38,39],{},"这里的 min() 让最小列宽不会超过容器。屏幕变窄时，卡片仍然可以完整放下；空间变大时，它们再自然地排成多列。",[20,41,42],{"id":42},"给长内容留一条退路",[13,44,45],{},"现实中的内容不会总是刚好合适。代码块可能很长，链接可能没有空格，标题也可能比设计稿多出一倍。",[27,47,50],{"className":48,"code":49,"language":32,"meta":33},[30],".article-body { overflow-wrap: anywhere; }\n.article-body pre { overflow-x: auto; }\n.article-card { min-width: 0; }\n",[35,51,49],{"__ignoreMap":33},[13,53,54],{},"这几行并不引人注目，却能解决很多横向溢出。比起隐藏内容，我更愿意让代码块保留自己的滚动区域。",[20,56,57],{"id":57},"让增强保持可选",[13,59,60],{},"搜索和主题切换需要 JavaScript，但正文和导航可以直接写在 HTML 中。脚本加载失败时，读者仍然能把文章读完。",[62,63,64,80],"table",{},[65,66,67],"thead",{},[68,69,70,74,77],"tr",{},[71,72,73],"th",{},"内容",[71,75,76],{},"基础体验",[71,78,79],{},"渐进增强",[81,82,83,95,106],"tbody",{},[68,84,85,89,92],{},[86,87,88],"td",{},"文章正文",[86,90,91],{},"直接阅读",[86,93,94],{},"目录位置提示",[68,96,97,100,103],{},[86,98,99],{},"代码块",[86,101,102],{},"横向滚动",[86,104,105],{},"复制与自动换行",[68,107,108,111,114],{},[86,109,110],{},"文章列表",[86,112,113],{},"普通链接",[86,115,116],{},"即时筛选和排序",[20,118,119],{"id":119},"简单来自清楚的边界",[13,121,122],{},"减少代码之前，先明确每一层负责什么。布局决定空间，排版照顾文字，交互回应动作。边界清楚以后，代码通常也会变得更容易修改。",{"title":33,"searchDepth":124,"depth":124,"links":125},4,[126,128,129,130],{"id":22,"depth":127,"text":22},2,{"id":42,"depth":127,"text":42},{"id":57,"depth":127,"text":57},{"id":119,"depth":127,"text":119},[132],"开发","2026-10-28","从一个小小的布局问题出发，聊聊 CSS 里那些恰到好处的解法。",false,"md","\u002Fassets\u002Fcode.svg",{"slots":139},{},true,"\u002Farticles\u002Fsmall-css",null,{"text":144,"minutes":145,"time":146,"words":147},"3 min read",2.315,138900,463,90,{"title":5,"description":134},{"loc":141},"posts\u002F2026\u002Fsmall-css",[153,154],"CSS","前端","tech","2026-11-03","4uNYybQx-7sJA7aXFqgvusDCVa69lC04rTLZdTMZ3Rg",[159,165],{"title":160,"path":161,"stem":162,"date":163,"type":164,"children":-1},"周末，去有风的地方","\u002Farticles\u002Fa-windy-weekend","posts\u002F2026\u002Fa-windy-weekend","2026-10-19","story",{"title":166,"path":167,"stem":168,"date":169,"type":155,"children":-1},"一间慢慢生长的数字小屋","\u002Farticles\u002Fa-place-to-write","posts\u002F2026\u002Fa-place-to-write","2026-11-02",1793799126362]