[{"data":1,"prerenderedAt":535},["ShallowReactive",2],{"post-\u002Fposts\u002F1161d2f5":3,"post-nav-\u002Fposts\u002F1161d2f5":495,"post-related-\u002Fposts\u002F1161d2f5":515},{"id":4,"title":5,"abbrlink":6,"aisummary":7,"body":8,"category":480,"cover":481,"date":482,"description":483,"draft":484,"extension":485,"featured":484,"meta":486,"navigation":141,"path":487,"pinned":484,"seo":488,"stem":489,"tags":490,"updated":481,"__hash__":494},"posts\u002Fposts\u002Fmobile-first-375.md","写给 375px 的界面","1161d2f5","文章讨论了移动端界面设计的关键点，包括底部 Tab 栏的位置、环境光暗时的适配以及正文排版。底部导航应置于拇指可触及区域，避免顶部不可达区。正文字号不应缩小，保持 17px 并调整 padding 和触控元素大小。图片需注意高度和懒加载，断点应基于真实设备形态而非随意划分。触控目标至少 44×44px，确保用户体验流畅。",{"type":9,"value":10,"toc":471},"minimark",[11,15,28,33,36,39,42,45,56,64,68,71,74,197,203,206,210,213,219,222,229,232,247,250,253,259,265,305,311,314,317,323,329,332,335,338,341,449,452,455,464,467],[12,13,14],"p",{},"移动端适配做得好不好，看三件事就够了：",[16,17,18,22,25],"ol",{},[19,20,21],"li",{},"底部有没有 Tab 栏",[19,23,24],{},"主题切换按钮在不在拇指够得着的地方",[19,26,27],{},"环境光暗的时候，界面有没有做适配",[29,30,32],"h2",{"id":31},"为什么是底部-tab-栏","为什么是底部 Tab 栏",[12,34,35],{},"单手握持手机时，拇指的自然活动范围是一个以屏幕下缘为圆心的扇形。",[12,37,38],{},"屏幕顶部 1\u002F3 是拇指的「不可达区」。把导航放那里，意味着用户要换手或者用另一只手。",[12,40,41],{},"所以 iOS 和 Android 的主流 App 全都把一级导航放底部。Web 应用也应该这样。",[12,43,44],{},"我的做法：",[46,47,52],"pre",{"className":48,"code":50,"language":51},[49],"language-text","桌面 ≥1024px    顶部水平导航\n平板 768-1023   汉堡菜单\n移动 \u003C768px     底部固定 Tab 栏（4-5 格）\n","text",[53,54,50],"code",{"__ignoreMap":55},"",[12,57,58,59,63],{},"移动端底栏的 5 格是：",[60,61,62],"strong",{},"首页 \u002F 归档 \u002F 分类 \u002F 标签 + 搜索","。",[29,65,67],{"id":66},"安全区被忽略的-iphone-细节","安全区：被忽略的 iPhone 细节",[12,69,70],{},"全面屏手机底部有一条系统手势条（Home Indicator）。",[12,72,73],{},"如果你的固定底栏紧贴屏幕底缘，手势条会压在它上面：",[46,75,79],{"className":76,"code":77,"language":78,"meta":55,"style":55},"language-css shiki shiki-themes github-light github-dark","\u002F* 错误 *\u002F\n.tabbar {\n  position: fixed;\n  bottom: 0;\n}\n\n\u002F* 正确 *\u002F\n.tabbar {\n  position: fixed;\n  bottom: 0;\n  padding-bottom: env(safe-area-inset-bottom, 0);\n}\n","css",[53,80,81,90,101,117,130,136,143,149,156,167,178,192],{"__ignoreMap":55},[82,83,86],"span",{"class":84,"line":85},"line",1,[82,87,89],{"class":88},"sJ8bj","\u002F* 错误 *\u002F\n",[82,91,93,97],{"class":84,"line":92},2,[82,94,96],{"class":95},"sScJk",".tabbar",[82,98,100],{"class":99},"sVt8B"," {\n",[82,102,104,108,111,114],{"class":84,"line":103},3,[82,105,107],{"class":106},"sj4cs","  position",[82,109,110],{"class":99},": ",[82,112,113],{"class":106},"fixed",[82,115,116],{"class":99},";\n",[82,118,120,123,125,128],{"class":84,"line":119},4,[82,121,122],{"class":106},"  bottom",[82,124,110],{"class":99},[82,126,127],{"class":106},"0",[82,129,116],{"class":99},[82,131,133],{"class":84,"line":132},5,[82,134,135],{"class":99},"}\n",[82,137,139],{"class":84,"line":138},6,[82,140,142],{"emptyLinePlaceholder":141},true,"\n",[82,144,146],{"class":84,"line":145},7,[82,147,148],{"class":88},"\u002F* 正确 *\u002F\n",[82,150,152,154],{"class":84,"line":151},8,[82,153,96],{"class":95},[82,155,100],{"class":99},[82,157,159,161,163,165],{"class":84,"line":158},9,[82,160,107],{"class":106},[82,162,110],{"class":99},[82,164,113],{"class":106},[82,166,116],{"class":99},[82,168,170,172,174,176],{"class":84,"line":169},10,[82,171,122],{"class":106},[82,173,110],{"class":99},[82,175,127],{"class":106},[82,177,116],{"class":99},[82,179,181,184,187,189],{"class":84,"line":180},11,[82,182,183],{"class":106},"  padding-bottom",[82,185,186],{"class":99},": env(safe-area-inset-bottom, ",[82,188,127],{"class":106},[82,190,191],{"class":99},");\n",[82,193,195],{"class":84,"line":194},12,[82,196,135],{"class":99},[12,198,199,202],{},[53,200,201],{},"env(safe-area-inset-bottom)"," 在 iPhone 上是 34px，在没有手势条的设备上是 0。",[12,204,205],{},"一行 CSS，避免手势条盖住「搜索」按钮。",[29,207,209],{"id":208},"_375px-下的正文排版","375px 下的正文排版",[12,211,212],{},"我的正文容器在桌面是 764px，移动端自然是 100% 减去左右 padding。",[12,214,215,216,63],{},"字号",[60,217,218],{},"不能缩",[12,220,221],{},"很多人在移动端把正文从 17px 缩到 15px，理由是\"屏幕小\"。",[12,223,224,225,228],{},"这是反的：",[60,226,227],{},"屏幕越小，眼睛离屏幕越近，但单行字数也越少","。缩字号会让行更短、折行更多，读起来更累。",[12,230,231],{},"正确的移动端排版：",[233,234,235,238,241,244],"ul",{},[19,236,237],{},"字号不变（17px）",[19,239,240],{},"行高不变（1.75）",[19,242,243],{},"padding 收窄（24px → 20px）",[19,245,246],{},"代码块允许横向滚动（不要折行）",[29,248,249],{"id":249},"图片的移动端处理",[12,251,252],{},"全宽图片在小屏幕上没问题，但要注意两点：",[12,254,255,258],{},[60,256,257],{},"一、高度别用 vh 定死。"," 手机竖屏的 vh 包含地址栏高度，会跳。",[12,260,261,264],{},[60,262,263],{},"二、懒加载是必须的。"," 文章第三屏往后的图片，用户可能永远不会滚到。",[46,266,270],{"className":267,"code":268,"language":269,"meta":55,"style":55},"language-html shiki shiki-themes github-light github-dark","\u003Cimg loading=\"lazy\" decoding=\"async\" ... \u002F>\n","html",[53,271,272],{"__ignoreMap":55},[82,273,274,277,281,284,287,291,294,296,299,302],{"class":84,"line":85},[82,275,276],{"class":99},"\u003C",[82,278,280],{"class":279},"s9eBZ","img",[82,282,283],{"class":95}," loading",[82,285,286],{"class":99},"=",[82,288,290],{"class":289},"sZZnC","\"lazy\"",[82,292,293],{"class":95}," decoding",[82,295,286],{"class":99},[82,297,298],{"class":289},"\"async\"",[82,300,301],{"class":95}," ...",[82,303,304],{"class":99}," \u002F>\n",[12,306,307,310],{},[53,308,309],{},"decoding=\"async\""," 让图片解码不阻塞主线程，和 lazy 是两个维度的事，都要写。",[29,312,313],{"id":313},"断点的哲学",[12,315,316],{},"我用的断点很少：",[46,318,321],{"className":319,"code":320,"language":51},[49],"\u003C 768px      移动\n768-1023px   平板\n≥ 1024px     桌面\n≥ 1280px     桌面 + 目录旁栏\n",[53,322,320],{"__ignoreMap":55},[12,324,325,326,63],{},"只有四个，因为",[60,327,328],{},"断点应该对应真实的设备形态，而不是随便划几刀",[12,330,331],{},"平板为什么用汉堡菜单？因为 768-1023px 宽度下，水平导航 + 正文 764px 会挤，但底栏又显得空间浪费。汉堡菜单是这个形态下的正确答案。",[29,333,334],{"id":334},"触控目标",[12,336,337],{},"所有可点击元素的触控目标至少 44×44px（iOS HIG 的标准）。",[12,339,340],{},"我的搜索按钮是 32×32px 的图标，但外层有 16px 的点击热区扩展：",[46,342,344],{"className":76,"code":343,"language":78,"meta":55,"style":55},".search-trigger {\n  width: 32px;\n  height: 32px;\n  position: relative;\n}\n\n.search-trigger::after {\n  content: '';\n  position: absolute;\n  inset: -8px;\n}\n",[53,345,346,353,369,382,393,397,401,408,420,431,445],{"__ignoreMap":55},[82,347,348,351],{"class":84,"line":85},[82,349,350],{"class":95},".search-trigger",[82,352,100],{"class":99},[82,354,355,358,360,363,367],{"class":84,"line":92},[82,356,357],{"class":106},"  width",[82,359,110],{"class":99},[82,361,362],{"class":106},"32",[82,364,366],{"class":365},"szBVR","px",[82,368,116],{"class":99},[82,370,371,374,376,378,380],{"class":84,"line":103},[82,372,373],{"class":106},"  height",[82,375,110],{"class":99},[82,377,362],{"class":106},[82,379,366],{"class":365},[82,381,116],{"class":99},[82,383,384,386,388,391],{"class":84,"line":119},[82,385,107],{"class":106},[82,387,110],{"class":99},[82,389,390],{"class":106},"relative",[82,392,116],{"class":99},[82,394,395],{"class":84,"line":132},[82,396,135],{"class":99},[82,398,399],{"class":84,"line":138},[82,400,142],{"emptyLinePlaceholder":141},[82,402,403,406],{"class":84,"line":145},[82,404,405],{"class":95},".search-trigger::after",[82,407,100],{"class":99},[82,409,410,413,415,418],{"class":84,"line":151},[82,411,412],{"class":106},"  content",[82,414,110],{"class":99},[82,416,417],{"class":289},"''",[82,419,116],{"class":99},[82,421,422,424,426,429],{"class":84,"line":158},[82,423,107],{"class":106},[82,425,110],{"class":99},[82,427,428],{"class":106},"absolute",[82,430,116],{"class":99},[82,432,433,436,438,441,443],{"class":84,"line":169},[82,434,435],{"class":106},"  inset",[82,437,110],{"class":99},[82,439,440],{"class":106},"-8",[82,442,366],{"class":365},[82,444,116],{"class":99},[82,446,447],{"class":84,"line":180},[82,448,135],{"class":99},[12,450,451],{},"视觉小，触控大。这是图标按钮的标准做法。",[29,453,454],{"id":454},"一句话",[456,457,458],"blockquote",{},[12,459,460,461,63],{},"移动端适配不是\"能用\"，是",[60,462,463],{},"单手、通勤、暗光下都不难受",[12,465,466],{},"做到这三点，就已经超过 80% 的网站了。",[468,469,470],"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 .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 .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}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":55,"searchDepth":92,"depth":92,"links":472},[473,474,475,476,477,478,479],{"id":31,"depth":92,"text":32},{"id":66,"depth":92,"text":67},{"id":208,"depth":92,"text":209},{"id":249,"depth":92,"text":249},{"id":313,"depth":92,"text":313},{"id":334,"depth":92,"text":334},{"id":454,"depth":92,"text":454},"设计",null,"2025-06-02","移动端不是缩小版桌面。底部 Tab 栏、可达的拇指区、iOS 安全区——这些细节决定了移动端体验的下限。",false,"md",{},"\u002Fposts\u002F1161d2f5",{"title":5,"description":483},"posts\u002Fmobile-first-375",[491,492,493],"响应式","移动端","交互","J_a6MYU7JkaPW1QgLoy4fytc_zD3octypuAdqINnLBs",{"prev":496,"next":505},{"path":497,"title":498,"description":499,"date":500,"updated":481,"tags":501,"category":480,"cover":504,"draft":484,"pinned":141,"featured":484},"\u002Fposts\u002F90a855a1","排版比配色更决定气质","把同样一套颜色交给两个人排，出来的东西可以完全不同。这篇讲我怎么用字重、行距和留白，在不换颜色的前提下改变一个页面的脾气。","2025-10-28",[502,480,503],"排版","CSS","\u002Fimages\u002Fcovers\u002Ftypography.png",{"path":506,"title":507,"description":508,"date":509,"updated":481,"tags":510,"category":514,"cover":481,"draft":484,"pinned":484,"featured":484},"\u002Fposts\u002F746cfa4c","无加载不是速度，是连续感","一个 300ms 的白屏比一个 800ms 的骨架屏更让人焦虑。这篇讲怎么用 SSG、预取和 view transition 把页面跳转做成「一瞬间的事」。","2025-05-15",[511,512,513],"性能","体验","Nuxt","前端",[516,525,527],{"path":517,"title":518,"description":519,"date":520,"updated":481,"tags":521,"category":480,"cover":524,"draft":484,"pinned":484,"featured":484},"\u002Fposts\u002F85fffa25","测试文章乙：有封面但非推荐","这是首页改版验收用的测试文章乙，有封面但未标记 featured，只出现在卡片流，不进轮播。","2026-10-20",[522,523],"测试","首页改版","\u002Fimages\u002Fcovers\u002Fcharset.png",{"path":497,"title":498,"description":499,"date":500,"updated":481,"tags":526,"category":480,"cover":504,"draft":484,"pinned":141,"featured":484},[502,480,503],{"path":528,"title":529,"description":530,"date":531,"updated":481,"tags":532,"category":480,"cover":481,"draft":484,"pinned":484,"featured":484},"\u002Fposts\u002F8628a5ad","别再用卡片装一切","卡片是个好东西，但它有明确的使用条件。当每一块内容都变成同样圆角同样阴影的卡片时，页面就失去了层级，读者也失去了方向。","2025-08-22",[480,533,534],"布局","反思",1794495071621]