[{"data":1,"prerenderedAt":157},["ShallowReactive",2],{"article-mobile-layout-checklist":3,"related-articles":56},{"id":4,"title":5,"body":6,"categoryLabel":39,"categorySlug":40,"description":41,"extension":42,"featured":43,"meta":44,"navigation":45,"path":46,"publishedAt":47,"readingMinutes":48,"seo":49,"stem":50,"tags":51,"__hash__":55},"blog\u002Fblog\u002Fmobile-layout-checklist.md","做移动端页面适配时的检查笔记",{"type":7,"value":8,"toc":32},"minimark",[9,13,17,20,23,26,29],[10,11,12],"p",{},"页面在桌面上看起来正常，不代表在手机上也好用。适配时可以从内容本身开始，而不只是缩小字号。",[14,15,16],"h2",{"id":16},"先设置合理的内容宽度",[10,18,19],{},"主体使用弹性宽度和最大宽度，卡片留出适当内边距。避免固定像素宽度导致横向滚动，也要检查长英文、代码和链接是否会撑破容器。",[14,21,22],{"id":22},"检查触控和焦点",[10,24,25],{},"按钮之间要留出足够间距，键盘焦点应清楚可见。导航折叠后仍应能用键盘访问，关闭菜单后焦点位置也要合理。",[14,27,28],{"id":28},"验证文字和顺序",[10,30,31],{},"长标题要能自然换行，标签过多时允许换行。用窄屏模拟器检查页面顺序、横向滚动条和固定元素是否遮挡内容。",{"title":33,"searchDepth":34,"depth":34,"links":35},"",2,[36,37,38],{"id":16,"depth":34,"text":16},{"id":22,"depth":34,"text":22},{"id":28,"depth":34,"text":28},"页面与样式","styles","从内容宽度、触控区域、文字换行和键盘焦点几个方面检查窄屏体验。","md",false,{},true,"\u002Fblog\u002Fmobile-layout-checklist","2026-08-20",5,{"title":5,"description":41},"blog\u002Fmobile-layout-checklist",[52,53,54],"CSS","响应式","可访问性","FKpe9vEYmXDT0UbD51oBXEDTxTUtaBwgRe1KxvWN50Y",[57,67,69,81,89,97,105,113,121,131,139,147],{"id":58,"path":59,"title":60,"description":61,"categorySlug":40,"categoryLabel":39,"publishedAt":62,"readingMinutes":63,"featured":45,"tags":64},"blog\u002Fblog\u002Fcss-grid-cards.md","\u002Fblog\u002Fcss-grid-cards","用 CSS Grid 排列自适应卡片","使用 repeat、minmax 和 auto-fit，让卡片列数随容器宽度自然变化。","2026-09-10",4,[52,65,66],"Grid","页面布局",{"id":4,"path":46,"title":5,"description":41,"categorySlug":40,"categoryLabel":39,"publishedAt":47,"readingMinutes":48,"featured":43,"tags":68},[52,53,54],{"id":70,"path":71,"title":72,"description":73,"categorySlug":74,"categoryLabel":75,"publishedAt":76,"readingMinutes":77,"featured":45,"tags":78},"blog\u002Fblog\u002Freact-controlled-form.md","\u002Fblog\u002Freact-controlled-form","React 受控表单：从一个输入框开始","用一个简单的姓名输入框，理解 value、onChange 与 React state 之间的关系。","react","React","2026-09-18",6,[75,79,80],"表单","学习笔记",{"id":82,"path":83,"title":84,"description":85,"categorySlug":74,"categoryLabel":75,"publishedAt":86,"readingMinutes":63,"featured":43,"tags":87},"blog\u002Fblog\u002Freact-list-keys.md","\u002Fblog\u002Freact-list-keys","React 列表渲染里的 key 有什么用","通过稳定的 key 帮助 React 识别列表项目，避免用数组下标造成的状态错位。","2026-08-12",[75,88,80],"列表",{"id":90,"path":91,"title":92,"description":93,"categorySlug":74,"categoryLabel":75,"publishedAt":94,"readingMinutes":48,"featured":43,"tags":95},"blog\u002Fblog\u002Freact-props-and-state.md","\u002Fblog\u002Freact-props-and-state","React 组件里的 Props 和 State","用一个简单的信息卡片区分外部传入的数据和组件内部会变化的数据。","2026-08-28",[75,96,80],"组件",{"id":98,"path":99,"title":100,"description":101,"categorySlug":74,"categoryLabel":75,"publishedAt":102,"readingMinutes":48,"featured":43,"tags":103},"blog\u002Fblog\u002Freact-small-components.md","\u002Fblog\u002Freact-small-components","把重复的界面拆成小组件","从重复的按钮和卡片开始，认识组件拆分的几个简单信号。","2026-07-16",[75,96,104],"练习记录",{"id":106,"path":107,"title":108,"description":109,"categorySlug":74,"categoryLabel":75,"publishedAt":110,"readingMinutes":77,"featured":43,"tags":111},"blog\u002Fblog\u002Freact-use-effect-notes.md","\u002Fblog\u002Freact-use-effect-notes","React useEffect 的依赖和清理","整理 useEffect 何时运行，以及订阅和定时器为什么需要清理。","2026-06-30",[75,112,80],"useEffect",{"id":114,"path":115,"title":116,"description":117,"categorySlug":74,"categoryLabel":75,"publishedAt":118,"readingMinutes":63,"featured":43,"tags":119},"blog\u002Fblog\u002Freact-use-state-practice.md","\u002Fblog\u002Freact-use-state-practice","用 useState 管理一个简单的计数交互","从加一和重置两个操作，熟悉 React state 的声明与更新方式。","2026-07-30",[75,120,104],"useState",{"id":122,"path":123,"title":124,"description":125,"categorySlug":126,"categoryLabel":127,"publishedAt":128,"readingMinutes":48,"featured":45,"tags":129},"blog\u002Fblog\u002Ftypescript-component-props.md","\u002Fblog\u002Ftypescript-component-props","给 React 组件的 Props 添加 TypeScript 类型","用必填属性和可选属性描述组件接口，让使用方式在编辑器里更清晰。","typescript","TypeScript","2026-09-02",[127,75,130],"类型",{"id":132,"path":133,"title":134,"description":135,"categorySlug":126,"categoryLabel":127,"publishedAt":136,"readingMinutes":48,"featured":45,"tags":137},"blog\u002Fblog\u002Ftypescript-narrowing.md","\u002Fblog\u002Ftypescript-narrowing","TypeScript 类型收窄入门","使用 typeof 和条件判断缩小联合类型的范围，让后续代码更安全。","2026-09-25",[127,138,80],"类型收窄",{"id":140,"path":141,"title":142,"description":143,"categorySlug":126,"categoryLabel":127,"publishedAt":144,"readingMinutes":63,"featured":43,"tags":145},"blog\u002Fblog\u002Ftypescript-union-status.md","\u002Fblog\u002Ftypescript-union-status","用联合类型描述请求状态","把加载、成功和失败等状态限制在明确的集合里，减少拼写错误和遗漏分支。","2026-08-04",[127,146,80],"联合类型",{"id":148,"path":149,"title":150,"description":151,"categorySlug":152,"categoryLabel":153,"publishedAt":154,"readingMinutes":63,"featured":43,"tags":155},"blog\u002Fblog\u002Fvite-react-project.md","\u002Fblog\u002Fvite-react-project","用 Vite 创建一个 React + TypeScript 小项目","记录从初始化模板到启动开发服务器的基础步骤，以及几个值得先检查的文件。","tools","开发工具","2026-06-12",[156,75,127],"Vite",1792674168120]