[{"data":1,"prerenderedAt":1053},["ShallowReactive",2],{"post-\u002Fposts\u002Fdark-mode-design":3,"post-nav-\u002Fposts\u002Fdark-mode-design":1021,"post-related-\u002Fposts\u002Fdark-mode-design":1040},{"id":4,"title":5,"body":6,"category":1007,"cover":1008,"date":1009,"description":1010,"draft":1011,"extension":1012,"featured":1011,"meta":1013,"navigation":265,"path":1014,"pinned":1011,"seo":1015,"stem":1016,"tags":1017,"updated":1008,"__hash__":1020},"posts\u002Fposts\u002Fdark-mode-design.md","暗色模式不是把颜色反过来",{"type":7,"value":8,"toc":996},"minimark",[9,13,86,89,130,133,137,142,145,148,151,197,200,204,207,216,222,230,315,319,322,325,387,397,403,408,411,577,584,600,607,616,619,622,625,658,668,754,757,761,764,775,932,935,980,983,989,992],[10,11,12],"p",{},"我见过太多暗色模式是这样的：",[14,15,20],"pre",{"className":16,"code":17,"language":18,"meta":19,"style":19},"language-css shiki shiki-themes github-light github-dark","\u002F* 这就是全部实现 *\u002F\n.dark {\n  filter: invert(1) hue-rotate(180deg);\n}\n","css","",[21,22,23,32,43,80],"code",{"__ignoreMap":19},[24,25,28],"span",{"class":26,"line":27},"line",1,[24,29,31],{"class":30},"sJ8bj","\u002F* 这就是全部实现 *\u002F\n",[24,33,35,39],{"class":26,"line":34},2,[24,36,38],{"class":37},"sScJk",".dark",[24,40,42],{"class":41},"sVt8B"," {\n",[24,44,46,50,53,56,59,62,65,68,70,73,77],{"class":26,"line":45},3,[24,47,49],{"class":48},"sj4cs","  filter",[24,51,52],{"class":41},": ",[24,54,55],{"class":48},"invert",[24,57,58],{"class":41},"(",[24,60,61],{"class":48},"1",[24,63,64],{"class":41},") ",[24,66,67],{"class":48},"hue-rotate",[24,69,58],{"class":41},[24,71,72],{"class":48},"180",[24,74,76],{"class":75},"szBVR","deg",[24,78,79],{"class":41},");\n",[24,81,83],{"class":26,"line":82},4,[24,84,85],{"class":41},"}\n",[10,87,88],{},"或者稍微认真一点的：",[14,90,92],{"className":16,"code":91,"language":18,"meta":19,"style":19},".dark {\n  --bg: #000;\n  --text: #fff;\n}\n",[21,93,94,100,114,126],{"__ignoreMap":19},[24,95,96,98],{"class":26,"line":27},[24,97,38],{"class":37},[24,99,42],{"class":41},[24,101,102,106,108,111],{"class":26,"line":34},[24,103,105],{"class":104},"s4XuR","  --bg",[24,107,52],{"class":41},[24,109,110],{"class":48},"#000",[24,112,113],{"class":41},";\n",[24,115,116,119,121,124],{"class":26,"line":45},[24,117,118],{"class":104},"  --text",[24,120,52],{"class":41},[24,122,123],{"class":48},"#fff",[24,125,113],{"class":41},[24,127,128],{"class":26,"line":82},[24,129,85],{"class":41},[10,131,132],{},"两种都错。",[134,135,136],"h2",{"id":136},"为什么不能简单反转",[138,139,141],"h3",{"id":140},"一纯黑配纯白太刺眼","一、纯黑配纯白太刺眼",[10,143,144],{},"白底黑字的对比度是 21:1，这是物理极限。",[10,146,147],{},"在亮环境下这没问题——瞳孔小，进光量少。但在暗环境下，你的瞳孔放大了，屏幕成了唯一光源，21:1 的对比度会让眼睛很快疲劳。",[10,149,150],{},"所以暗色模式的标准做法是：",[14,152,154],{"className":16,"code":153,"language":18,"meta":19,"style":19},".dark {\n  --background: #09090b;  \u002F* 不是 #000 *\u002F\n  --foreground: #fafafa;  \u002F* 不是 #fff *\u002F\n}\n",[21,155,156,162,178,193],{"__ignoreMap":19},[24,157,158,160],{"class":26,"line":27},[24,159,38],{"class":37},[24,161,42],{"class":41},[24,163,164,167,169,172,175],{"class":26,"line":34},[24,165,166],{"class":104},"  --background",[24,168,52],{"class":41},[24,170,171],{"class":48},"#09090b",[24,173,174],{"class":41},";  ",[24,176,177],{"class":30},"\u002F* 不是 #000 *\u002F\n",[24,179,180,183,185,188,190],{"class":26,"line":45},[24,181,182],{"class":104},"  --foreground",[24,184,52],{"class":41},[24,186,187],{"class":48},"#fafafa",[24,189,174],{"class":41},[24,191,192],{"class":30},"\u002F* 不是 #fff *\u002F\n",[24,194,195],{"class":26,"line":82},[24,196,85],{"class":41},[10,198,199],{},"对比度降到约 19:1。差别不大，但长时间阅读舒服很多。",[138,201,203],{"id":202},"二纯黑背景会让阴影失效","二、纯黑背景会让阴影失效",[10,205,206],{},"亮色模式下阴影是黑色半透明：",[14,208,210],{"className":16,"code":209,"language":18,"meta":19,"style":19},"box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n",[21,211,212],{"__ignoreMap":19},[24,213,214],{"class":26,"line":27},[24,215,209],{"class":41},[10,217,218,219,221],{},"暗色模式下把同一个阴影放在 ",[21,220,171],{}," 上——你什么都看不见。黑色叠黑色。",[10,223,224,225,229],{},"这就是为什么",[226,227,228],"strong",{},"暗色模式通常完全禁用阴影","，改用边框或者亮度差来区分层级：",[14,231,233],{"className":16,"code":232,"language":18,"meta":19,"style":19},".dark * {\n  box-shadow: none;\n}\n\n\u002F* 用亮一点的面表达\"浮起来\" *\u002F\n.dark {\n  --surface: #18181b;      \u002F* 页面底 #09090b，卡片 #18181b *\u002F\n  --surface-hover: #27272a;\n}\n",[21,234,235,245,257,261,267,273,280,297,310],{"__ignoreMap":19},[24,236,237,239,243],{"class":26,"line":27},[24,238,38],{"class":37},[24,240,242],{"class":241},"s9eBZ"," *",[24,244,42],{"class":41},[24,246,247,250,252,255],{"class":26,"line":34},[24,248,249],{"class":48},"  box-shadow",[24,251,52],{"class":41},[24,253,254],{"class":48},"none",[24,256,113],{"class":41},[24,258,259],{"class":26,"line":45},[24,260,85],{"class":41},[24,262,263],{"class":26,"line":82},[24,264,266],{"emptyLinePlaceholder":265},true,"\n",[24,268,270],{"class":26,"line":269},5,[24,271,272],{"class":30},"\u002F* 用亮一点的面表达\"浮起来\" *\u002F\n",[24,274,276,278],{"class":26,"line":275},6,[24,277,38],{"class":37},[24,279,42],{"class":41},[24,281,283,286,288,291,294],{"class":26,"line":282},7,[24,284,285],{"class":104},"  --surface",[24,287,52],{"class":41},[24,289,290],{"class":48},"#18181b",[24,292,293],{"class":41},";      ",[24,295,296],{"class":30},"\u002F* 页面底 #09090b，卡片 #18181b *\u002F\n",[24,298,300,303,305,308],{"class":26,"line":299},8,[24,301,302],{"class":104},"  --surface-hover",[24,304,52],{"class":41},[24,306,307],{"class":48},"#27272a",[24,309,113],{"class":41},[24,311,313],{"class":26,"line":312},9,[24,314,85],{"class":41},[138,316,318],{"id":317},"三强调色必须重新调","三、强调色必须重新调",[10,320,321],{},"同一个颜色在亮底和暗底上的感知完全不同。",[10,323,324],{},"我的强调色：",[326,327,328,347],"table",{},[329,330,331],"thead",{},[332,333,334,338,341,344],"tr",{},[335,336,337],"th",{},"模式",[335,339,340],{},"值",[335,342,343],{},"对比度",[335,345,346],{},"说明",[348,349,350,369],"tbody",{},[332,351,352,356,361,366],{},[353,354,355],"td",{},"亮色",[353,357,358],{},[21,359,360],{},"#a94f33",[353,362,363,364],{},"5.45 on ",[21,365,123],{},[353,367,368],{},"深陶土，压得住白底",[332,370,371,374,379,384],{},[353,372,373],{},"暗色",[353,375,376],{},[21,377,378],{},"#cc785c",[353,380,381,382],{},"6.07 on ",[21,383,171],{},[353,385,386],{},"提亮 + 降饱和，不刺眼",[10,388,389,390,392,393,396],{},"如果暗色模式还用 ",[21,391,360],{},"，它在深色底上会显得",[226,394,395],{},"脏","——像褪色的油漆。因为深色底会让低亮度颜色失去光泽。",[10,398,399,400,402],{},"反过来，如果亮色模式用 ",[21,401,378],{},"，在白色上对比度只有 3.1:1，达不到 WCAG AA 的 4.5:1。",[10,404,405],{},[226,406,407],{},"所以强调色必须有两套值，这不是可选项。",[134,409,410],{"id":410},"完整的变量对照",[14,412,414],{"className":16,"code":413,"language":18,"meta":19,"style":19},":root {\n  --background: #ffffff;\n  --foreground: #18181b;\n  --muted: #fafafa;\n  --muted-foreground: #71717a;\n  --border: #e4e4e7;\n  --accent: #a94f33;\n}\n\n.dark {\n  --background: #09090b;\n  --foreground: #fafafa;\n  --muted: #18181b;\n  --muted-foreground: #a1a1aa;\n  --border: #27272a;\n  --accent: #cc785c;\n}\n",[21,415,416,423,434,444,455,467,479,490,494,498,505,516,527,538,550,561,572],{"__ignoreMap":19},[24,417,418,421],{"class":26,"line":27},[24,419,420],{"class":37},":root",[24,422,42],{"class":41},[24,424,425,427,429,432],{"class":26,"line":34},[24,426,166],{"class":104},[24,428,52],{"class":41},[24,430,431],{"class":48},"#ffffff",[24,433,113],{"class":41},[24,435,436,438,440,442],{"class":26,"line":45},[24,437,182],{"class":104},[24,439,52],{"class":41},[24,441,290],{"class":48},[24,443,113],{"class":41},[24,445,446,449,451,453],{"class":26,"line":82},[24,447,448],{"class":104},"  --muted",[24,450,52],{"class":41},[24,452,187],{"class":48},[24,454,113],{"class":41},[24,456,457,460,462,465],{"class":26,"line":269},[24,458,459],{"class":104},"  --muted-foreground",[24,461,52],{"class":41},[24,463,464],{"class":48},"#71717a",[24,466,113],{"class":41},[24,468,469,472,474,477],{"class":26,"line":275},[24,470,471],{"class":104},"  --border",[24,473,52],{"class":41},[24,475,476],{"class":48},"#e4e4e7",[24,478,113],{"class":41},[24,480,481,484,486,488],{"class":26,"line":282},[24,482,483],{"class":104},"  --accent",[24,485,52],{"class":41},[24,487,360],{"class":48},[24,489,113],{"class":41},[24,491,492],{"class":26,"line":299},[24,493,85],{"class":41},[24,495,496],{"class":26,"line":312},[24,497,266],{"emptyLinePlaceholder":265},[24,499,501,503],{"class":26,"line":500},10,[24,502,38],{"class":37},[24,504,42],{"class":41},[24,506,508,510,512,514],{"class":26,"line":507},11,[24,509,166],{"class":104},[24,511,52],{"class":41},[24,513,171],{"class":48},[24,515,113],{"class":41},[24,517,519,521,523,525],{"class":26,"line":518},12,[24,520,182],{"class":104},[24,522,52],{"class":41},[24,524,187],{"class":48},[24,526,113],{"class":41},[24,528,530,532,534,536],{"class":26,"line":529},13,[24,531,448],{"class":104},[24,533,52],{"class":41},[24,535,290],{"class":48},[24,537,113],{"class":41},[24,539,541,543,545,548],{"class":26,"line":540},14,[24,542,459],{"class":104},[24,544,52],{"class":41},[24,546,547],{"class":48},"#a1a1aa",[24,549,113],{"class":41},[24,551,553,555,557,559],{"class":26,"line":552},15,[24,554,471],{"class":104},[24,556,52],{"class":41},[24,558,307],{"class":48},[24,560,113],{"class":41},[24,562,564,566,568,570],{"class":26,"line":563},16,[24,565,483],{"class":104},[24,567,52],{"class":41},[24,569,378],{"class":48},[24,571,113],{"class":41},[24,573,575],{"class":26,"line":574},17,[24,576,85],{"class":41},[10,578,579,580,583],{},"注意 ",[21,581,582],{},"--muted-foreground"," 的变化：",[585,586,587,594],"ul",{},[588,589,590,591,593],"li",{},"亮色：",[21,592,464],{},"，比正文浅，但仍能读",[588,595,596,597,599],{},"暗色：",[21,598,547],{},"，比正文暗，但仍能读",[10,601,602,603,606],{},"方向是反的，但",[226,604,605],{},"目的相同：比正文低一级，但保持可读","。",[10,608,609,610,612,613,615],{},"如果暗色模式直接用亮色模式的 ",[21,611,464],{},"，它在 ",[21,614,171],{}," 上的对比度只有 4.3:1——刚好在 AA 线下面。",[134,617,618],{"id":618},"三态切换而不是两态",[10,620,621],{},"只用两态（亮\u002F暗）有个问题：用户系统里设了「跟随时间自动切换」，但网站不认。",[10,623,624],{},"所以我的实现是三态：",[14,626,630],{"className":627,"code":628,"language":629,"meta":19,"style":19},"language-ts shiki shiki-themes github-light github-dark","type ThemeMode = 'light' | 'dark' | 'system'\n","ts",[21,631,632],{"__ignoreMap":19},[24,633,634,637,640,643,647,650,653,655],{"class":26,"line":27},[24,635,636],{"class":75},"type",[24,638,639],{"class":37}," ThemeMode",[24,641,642],{"class":75}," =",[24,644,646],{"class":645},"sZZnC"," 'light'",[24,648,649],{"class":75}," |",[24,651,652],{"class":645}," 'dark'",[24,654,649],{"class":75},[24,656,657],{"class":645}," 'system'\n",[10,659,660,663,664,667],{},[21,661,662],{},"system"," 模式下监听 ",[21,665,666],{},"prefers-color-scheme","：",[14,669,671],{"className":627,"code":670,"language":629,"meta":19,"style":19},"const mq = matchMedia('(prefers-color-scheme: dark)')\n\nmq.addEventListener('change', () => {\n  if (mode.value === 'system') {\n    applyTheme(mq.matches)\n  }\n})\n",[21,672,673,694,698,719,736,744,749],{"__ignoreMap":19},[24,674,675,678,681,683,686,688,691],{"class":26,"line":27},[24,676,677],{"class":75},"const",[24,679,680],{"class":48}," mq",[24,682,642],{"class":75},[24,684,685],{"class":37}," matchMedia",[24,687,58],{"class":41},[24,689,690],{"class":645},"'(prefers-color-scheme: dark)'",[24,692,693],{"class":41},")\n",[24,695,696],{"class":26,"line":34},[24,697,266],{"emptyLinePlaceholder":265},[24,699,700,703,706,708,711,714,717],{"class":26,"line":45},[24,701,702],{"class":41},"mq.",[24,704,705],{"class":37},"addEventListener",[24,707,58],{"class":41},[24,709,710],{"class":645},"'change'",[24,712,713],{"class":41},", () ",[24,715,716],{"class":75},"=>",[24,718,42],{"class":41},[24,720,721,724,727,730,733],{"class":26,"line":82},[24,722,723],{"class":75},"  if",[24,725,726],{"class":41}," (mode.value ",[24,728,729],{"class":75},"===",[24,731,732],{"class":645}," 'system'",[24,734,735],{"class":41},") {\n",[24,737,738,741],{"class":26,"line":269},[24,739,740],{"class":37},"    applyTheme",[24,742,743],{"class":41},"(mq.matches)\n",[24,745,746],{"class":26,"line":275},[24,747,748],{"class":41},"  }\n",[24,750,751],{"class":26,"line":282},[24,752,753],{"class":41},"})\n",[10,755,756],{},"这样用户在系统里切了主题，网站立刻跟上，不需要手动点。",[134,758,760],{"id":759},"防止闪烁fouc","防止闪烁（FOUC）",[10,762,763],{},"最烦人的 bug：页面先渲染成亮色，200ms 后闪成暗色。",[10,765,766,767,770,771,774],{},"原因是 CSS 变量在 JS 执行后才生效。解法是在 ",[21,768,769],{},"\u003Chead>"," 里插一段",[226,772,773],{},"同步执行","的脚本：",[14,776,780],{"className":777,"code":778,"language":779,"meta":19,"style":19},"language-html shiki shiki-themes github-light github-dark","\u003Cscript>\n  (function () {\n    try {\n      var m = localStorage.getItem('theme-mode')\n      var d = m === 'dark' || ((!m || m === 'system') &&\n        window.matchMedia('(prefers-color-scheme: dark)').matches)\n      document.documentElement.classList.toggle('dark', d)\n    } catch (e) {}\n  })()\n\u003C\u002Fscript>\n","html",[21,781,782,793,804,811,835,876,891,907,918,923],{"__ignoreMap":19},[24,783,784,787,790],{"class":26,"line":27},[24,785,786],{"class":41},"\u003C",[24,788,789],{"class":241},"script",[24,791,792],{"class":41},">\n",[24,794,795,798,801],{"class":26,"line":34},[24,796,797],{"class":41},"  (",[24,799,800],{"class":75},"function",[24,802,803],{"class":41}," () {\n",[24,805,806,809],{"class":26,"line":45},[24,807,808],{"class":75},"    try",[24,810,42],{"class":41},[24,812,813,816,819,822,825,828,830,833],{"class":26,"line":82},[24,814,815],{"class":75},"      var",[24,817,818],{"class":41}," m ",[24,820,821],{"class":75},"=",[24,823,824],{"class":41}," localStorage.",[24,826,827],{"class":37},"getItem",[24,829,58],{"class":41},[24,831,832],{"class":645},"'theme-mode'",[24,834,693],{"class":41},[24,836,837,839,842,844,846,848,850,853,856,859,862,865,867,869,871,873],{"class":26,"line":269},[24,838,815],{"class":75},[24,840,841],{"class":41}," d ",[24,843,821],{"class":75},[24,845,818],{"class":41},[24,847,729],{"class":75},[24,849,652],{"class":645},[24,851,852],{"class":75}," ||",[24,854,855],{"class":41}," ((",[24,857,858],{"class":75},"!",[24,860,861],{"class":41},"m ",[24,863,864],{"class":75},"||",[24,866,818],{"class":41},[24,868,729],{"class":75},[24,870,732],{"class":645},[24,872,64],{"class":41},[24,874,875],{"class":75},"&&\n",[24,877,878,881,884,886,888],{"class":26,"line":275},[24,879,880],{"class":41},"        window.",[24,882,883],{"class":37},"matchMedia",[24,885,58],{"class":41},[24,887,690],{"class":645},[24,889,890],{"class":41},").matches)\n",[24,892,893,896,899,901,904],{"class":26,"line":282},[24,894,895],{"class":41},"      document.documentElement.classList.",[24,897,898],{"class":37},"toggle",[24,900,58],{"class":41},[24,902,903],{"class":645},"'dark'",[24,905,906],{"class":41},", d)\n",[24,908,909,912,915],{"class":26,"line":299},[24,910,911],{"class":41},"    } ",[24,913,914],{"class":75},"catch",[24,916,917],{"class":41}," (e) {}\n",[24,919,920],{"class":26,"line":312},[24,921,922],{"class":41},"  })()\n",[24,924,925,928,930],{"class":26,"line":500},[24,926,927],{"class":41},"\u003C\u002F",[24,929,789],{"class":241},[24,931,792],{"class":41},[10,933,934],{},"关键点：",[585,936,937,944,959,969],{},[588,938,939,940,943],{},"必须是",[226,941,942],{},"内联","的（外部脚本要等网络）",[588,945,946,947,950,951,954,955,958],{},"必须",[226,948,949],{},"同步","（",[21,952,953],{},"defer","\u002F",[21,956,957],{},"async"," 都会晚）",[588,960,961,962,964,965,968],{},"必须在 ",[21,963,769],{}," 里（",[21,966,967],{},"\u003Cbody>"," 末尾太晚）",[588,970,971,972,975,976,979],{},"必须包 ",[21,973,974],{},"try\u002Fcatch","（隐私模式下 ",[21,977,978],{},"localStorage"," 会抛异常）",[134,981,982],{"id":982},"一句话",[984,985,986],"blockquote",{},[10,987,988],{},"暗色模式是第二套设计，不是第一套的滤镜。",[10,990,991],{},"它需要独立的对比度核算、独立的阴影策略、独立的强调色。省掉这些步骤，出来的东西就是\"能看但难受\"。",[993,994,995],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#57606A;--shiki-dark:#9AA4B0}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":19,"searchDepth":34,"depth":34,"links":997},[998,1003,1004,1005,1006],{"id":136,"depth":34,"text":136,"children":999},[1000,1001,1002],{"id":140,"depth":45,"text":141},{"id":202,"depth":45,"text":203},{"id":317,"depth":45,"text":318},{"id":410,"depth":34,"text":410},{"id":618,"depth":34,"text":618},{"id":759,"depth":34,"text":760},{"id":982,"depth":34,"text":982},"设计",null,"2025-07-25","反转配色是最省事的做法，也是最糟的做法。暗色模式需要重新设计对比度、阴影、饱和度和层级关系。",false,"md",{},"\u002Fposts\u002Fdark-mode-design",{"title":5,"description":1010},"posts\u002Fdark-mode-design",[1018,1007,1019],"暗色模式","可访问性","ekfe4gWq2fNNet0IruLs5c-XOVvPnllDpeBgfBMK8bY",{"prev":1022,"next":1031},{"path":1023,"title":1024,"description":1025,"date":1026,"updated":1008,"tags":1027,"category":1007,"cover":1030,"draft":1011,"pinned":265,"featured":1011},"\u002Fposts\u002Ftypography-over-color","排版比配色更决定气质","把同样一套颜色交给两个人排，出来的东西可以完全不同。这篇讲我怎么用字重、行距和留白，在不换颜色的前提下改变一个页面的脾气。","2025-10-28",[1028,1007,1029],"排版","CSS","\u002Fimages\u002Fcovers\u002Ftypography.png",{"path":1032,"title":1033,"description":1034,"date":1035,"updated":1008,"tags":1036,"category":1007,"cover":1008,"draft":1011,"pinned":1011,"featured":1011},"\u002Fposts\u002Fmobile-first-375","写给 375px 的界面","移动端不是缩小版桌面。底部 Tab 栏、可达的拇指区、iOS 安全区——这些细节决定了移动端体验的下限。","2025-06-02",[1037,1038,1039],"响应式","移动端","交互",[1041,1043,1051],{"path":1023,"title":1024,"description":1025,"date":1026,"updated":1008,"tags":1042,"category":1007,"cover":1030,"draft":1011,"pinned":265,"featured":1011},[1028,1007,1029],{"path":1044,"title":1045,"description":1046,"date":1047,"updated":1008,"tags":1048,"category":1007,"cover":1008,"draft":1011,"pinned":1011,"featured":1011},"\u002Fposts\u002Fstop-using-cards","别再用卡片装一切","卡片是个好东西，但它有明确的使用条件。当每一块内容都变成同样圆角同样阴影的卡片时，页面就失去了层级，读者也失去了方向。","2025-08-22",[1007,1049,1050],"布局","反思",{"path":1032,"title":1033,"description":1034,"date":1035,"updated":1008,"tags":1052,"category":1007,"cover":1008,"draft":1011,"pinned":1011,"featured":1011},[1037,1038,1039],1794113901486]