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