[{"data":1,"prerenderedAt":4061},["ShallowReactive",2],{"content-/guide/responsive-design":3,"related-guide":4029},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"schemaType":11,"author":12,"date":13,"image":14,"body":15,"_type":4023,"_id":4024,"_source":4025,"_file":4026,"_stem":4027,"_extension":4028},"/guide/responsive-design","guide",false,"","响应式设计指南 - 打造完美的多端用户体验","HTMLPAGE响应式设计完整指南，从移动优先策略到多设备适配，帮你掌握现代网页设计的核心技能，创建在任何设备上都完美显示的网页。","响应式设计, 移动端适配, 响应式布局, 设备适配, CSS媒体查询, 移动优先设计","HowTo","HTMLPAGE","2025-11-21","/content-images/guide/guide.jpg",{"type":16,"children":17,"toc":3978},"root",[18,27,33,39,46,51,60,85,93,116,122,127,135,384,392,415,421,427,432,440,483,491,515,521,526,534,557,565,744,750,755,763,786,794,927,932,938,943,951,969,977,1083,1089,1094,1102,1125,1133,1266,1272,1277,1285,1308,1316,1454,1459,1465,1470,1478,1521,1529,1672,1678,1683,1691,1734,1742,2009,2015,2020,2028,2081,2086,2092,2097,2105,2173,2181,2566,2572,2577,2585,2912,2922,2928,2933,2941,3194,3199,3205,3210,3218,3261,3269,3292,3298,3303,3311,3334,3342,3385,3390,3396,3401,3454,3460,3465,3545,3550,3556,3561,3571,3581,3591,3601,3607,3612,3665,3670,3676,3681,3689,3707,3715,3733,3741,3759,3765,3770,3778,3796,3804,3822,3827,3832,3885,3890,3895,3942,3947,3952,3972],{"type":19,"tag":20,"props":21,"children":23},"element","h1",{"id":22},"响应式设计指南多设备完美适配",[24],{"type":25,"value":26},"text","响应式设计指南：多设备完美适配",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"在移动设备占据主导地位的今天，响应式设计已成为现代网页开发的标配。HTMLPAGE 提供强大的响应式设计工具，让你轻松创建在手机、平板、桌面等所有设备上都完美显示的网页。",{"type":19,"tag":34,"props":35,"children":37},"h2",{"id":36},"响应式设计核心概念",[38],{"type":25,"value":36},{"type":19,"tag":40,"props":41,"children":43},"h3",{"id":42},"移动优先策略",[44],{"type":25,"value":45},"📱 移动优先策略",{"type":19,"tag":28,"props":47,"children":48},{},[49],{"type":25,"value":50},"移动优先（Mobile First）是现代响应式设计的金标准：",{"type":19,"tag":28,"props":52,"children":53},{},[54],{"type":19,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":25,"value":59},"设计理念：",{"type":19,"tag":61,"props":62,"children":63},"ul",{},[64,70,75,80],{"type":19,"tag":65,"props":66,"children":67},"li",{},[68],{"type":25,"value":69},"从最小屏幕开始设计",{"type":19,"tag":65,"props":71,"children":72},{},[73],{"type":25,"value":74},"逐步增强到更大屏幕",{"type":19,"tag":65,"props":76,"children":77},{},[78],{"type":25,"value":79},"专注核心内容和功能",{"type":19,"tag":65,"props":81,"children":82},{},[83],{"type":25,"value":84},"优化触控交互体验",{"type":19,"tag":28,"props":86,"children":87},{},[88],{"type":19,"tag":55,"props":89,"children":90},{},[91],{"type":25,"value":92},"为什么移动优先？",{"type":19,"tag":61,"props":94,"children":95},{},[96,101,106,111],{"type":19,"tag":65,"props":97,"children":98},{},[99],{"type":25,"value":100},"移动流量已超过桌面流量",{"type":19,"tag":65,"props":102,"children":103},{},[104],{"type":25,"value":105},"谷歌实施移动优先索引",{"type":19,"tag":65,"props":107,"children":108},{},[109],{"type":25,"value":110},"强制聚焦最重要的内容",{"type":19,"tag":65,"props":112,"children":113},{},[114],{"type":25,"value":115},"更好的性能和用户体验",{"type":19,"tag":40,"props":117,"children":119},{"id":118},"️-断点策略",[120],{"type":25,"value":121},"🖥️ 断点策略",{"type":19,"tag":28,"props":123,"children":124},{},[125],{"type":25,"value":126},"断点（Breakpoints）定义了不同设备尺寸的设计切换点：",{"type":19,"tag":28,"props":128,"children":129},{},[130],{"type":19,"tag":55,"props":131,"children":132},{},[133],{"type":25,"value":134},"HTMLPAGE 标准断点：",{"type":19,"tag":136,"props":137,"children":141},"pre",{"className":138,"code":139,"language":140,"meta":7,"style":7},"language-css shiki shiki-themes github-dark github-dark","/* 手机端 */\n@media (max-width: 767px) { }\n\n/* 平板端 */\n@media (min-width: 768px) and (max-width: 1023px) { }\n\n/* 桌面端 */\n@media (min-width: 1024px) { }\n\n/* 大屏桌面 */\n@media (min-width: 1440px) { }\n","css",[142],{"type":19,"tag":143,"props":144,"children":145},"code",{"__ignoreMap":7},[146,158,200,210,219,284,292,301,334,342,351],{"type":19,"tag":147,"props":148,"children":151},"span",{"class":149,"line":150},"line",1,[152],{"type":19,"tag":147,"props":153,"children":155},{"style":154},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[156],{"type":25,"value":157},"/* 手机端 */\n",{"type":19,"tag":147,"props":159,"children":161},{"class":149,"line":160},2,[162,168,174,180,185,190,195],{"type":19,"tag":147,"props":163,"children":165},{"style":164},"--shiki-default:#F97583;--shiki-dark:#F97583",[166],{"type":25,"value":167},"@media",{"type":19,"tag":147,"props":169,"children":171},{"style":170},"--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8",[172],{"type":25,"value":173}," (",{"type":19,"tag":147,"props":175,"children":177},{"style":176},"--shiki-default:#79B8FF;--shiki-dark:#79B8FF",[178],{"type":25,"value":179},"max-width",{"type":19,"tag":147,"props":181,"children":182},{"style":170},[183],{"type":25,"value":184},": ",{"type":19,"tag":147,"props":186,"children":187},{"style":176},[188],{"type":25,"value":189},"767",{"type":19,"tag":147,"props":191,"children":192},{"style":164},[193],{"type":25,"value":194},"px",{"type":19,"tag":147,"props":196,"children":197},{"style":170},[198],{"type":25,"value":199},") { }\n",{"type":19,"tag":147,"props":201,"children":203},{"class":149,"line":202},3,[204],{"type":19,"tag":147,"props":205,"children":207},{"emptyLinePlaceholder":206},true,[208],{"type":25,"value":209},"\n",{"type":19,"tag":147,"props":211,"children":213},{"class":149,"line":212},4,[214],{"type":19,"tag":147,"props":215,"children":216},{"style":154},[217],{"type":25,"value":218},"/* 平板端 */\n",{"type":19,"tag":147,"props":220,"children":222},{"class":149,"line":221},5,[223,227,231,236,240,245,249,254,259,263,267,271,276,280],{"type":19,"tag":147,"props":224,"children":225},{"style":164},[226],{"type":25,"value":167},{"type":19,"tag":147,"props":228,"children":229},{"style":170},[230],{"type":25,"value":173},{"type":19,"tag":147,"props":232,"children":233},{"style":176},[234],{"type":25,"value":235},"min-width",{"type":19,"tag":147,"props":237,"children":238},{"style":170},[239],{"type":25,"value":184},{"type":19,"tag":147,"props":241,"children":242},{"style":176},[243],{"type":25,"value":244},"768",{"type":19,"tag":147,"props":246,"children":247},{"style":164},[248],{"type":25,"value":194},{"type":19,"tag":147,"props":250,"children":251},{"style":170},[252],{"type":25,"value":253},") ",{"type":19,"tag":147,"props":255,"children":256},{"style":164},[257],{"type":25,"value":258},"and",{"type":19,"tag":147,"props":260,"children":261},{"style":170},[262],{"type":25,"value":173},{"type":19,"tag":147,"props":264,"children":265},{"style":176},[266],{"type":25,"value":179},{"type":19,"tag":147,"props":268,"children":269},{"style":170},[270],{"type":25,"value":184},{"type":19,"tag":147,"props":272,"children":273},{"style":176},[274],{"type":25,"value":275},"1023",{"type":19,"tag":147,"props":277,"children":278},{"style":164},[279],{"type":25,"value":194},{"type":19,"tag":147,"props":281,"children":282},{"style":170},[283],{"type":25,"value":199},{"type":19,"tag":147,"props":285,"children":287},{"class":149,"line":286},6,[288],{"type":19,"tag":147,"props":289,"children":290},{"emptyLinePlaceholder":206},[291],{"type":25,"value":209},{"type":19,"tag":147,"props":293,"children":295},{"class":149,"line":294},7,[296],{"type":19,"tag":147,"props":297,"children":298},{"style":154},[299],{"type":25,"value":300},"/* 桌面端 */\n",{"type":19,"tag":147,"props":302,"children":304},{"class":149,"line":303},8,[305,309,313,317,321,326,330],{"type":19,"tag":147,"props":306,"children":307},{"style":164},[308],{"type":25,"value":167},{"type":19,"tag":147,"props":310,"children":311},{"style":170},[312],{"type":25,"value":173},{"type":19,"tag":147,"props":314,"children":315},{"style":176},[316],{"type":25,"value":235},{"type":19,"tag":147,"props":318,"children":319},{"style":170},[320],{"type":25,"value":184},{"type":19,"tag":147,"props":322,"children":323},{"style":176},[324],{"type":25,"value":325},"1024",{"type":19,"tag":147,"props":327,"children":328},{"style":164},[329],{"type":25,"value":194},{"type":19,"tag":147,"props":331,"children":332},{"style":170},[333],{"type":25,"value":199},{"type":19,"tag":147,"props":335,"children":337},{"class":149,"line":336},9,[338],{"type":19,"tag":147,"props":339,"children":340},{"emptyLinePlaceholder":206},[341],{"type":25,"value":209},{"type":19,"tag":147,"props":343,"children":345},{"class":149,"line":344},10,[346],{"type":19,"tag":147,"props":347,"children":348},{"style":154},[349],{"type":25,"value":350},"/* 大屏桌面 */\n",{"type":19,"tag":147,"props":352,"children":354},{"class":149,"line":353},11,[355,359,363,367,371,376,380],{"type":19,"tag":147,"props":356,"children":357},{"style":164},[358],{"type":25,"value":167},{"type":19,"tag":147,"props":360,"children":361},{"style":170},[362],{"type":25,"value":173},{"type":19,"tag":147,"props":364,"children":365},{"style":176},[366],{"type":25,"value":235},{"type":19,"tag":147,"props":368,"children":369},{"style":170},[370],{"type":25,"value":184},{"type":19,"tag":147,"props":372,"children":373},{"style":176},[374],{"type":25,"value":375},"1440",{"type":19,"tag":147,"props":377,"children":378},{"style":164},[379],{"type":25,"value":194},{"type":19,"tag":147,"props":381,"children":382},{"style":170},[383],{"type":25,"value":199},{"type":19,"tag":28,"props":385,"children":386},{},[387],{"type":19,"tag":55,"props":388,"children":389},{},[390],{"type":25,"value":391},"自定义断点原则：",{"type":19,"tag":61,"props":393,"children":394},{},[395,400,405,410],{"type":19,"tag":65,"props":396,"children":397},{},[398],{"type":25,"value":399},"基于内容需要而非设备尺寸",{"type":19,"tag":65,"props":401,"children":402},{},[403],{"type":25,"value":404},"考虑用户使用场景",{"type":19,"tag":65,"props":406,"children":407},{},[408],{"type":25,"value":409},"保持断点数量合理（3-5个）",{"type":19,"tag":65,"props":411,"children":412},{},[413],{"type":25,"value":414},"测试边界值表现",{"type":19,"tag":34,"props":416,"children":418},{"id":417},"htmlpage-响应式工具",[419],{"type":25,"value":420},"HTMLPAGE 响应式工具",{"type":19,"tag":40,"props":422,"children":424},{"id":423},"可视化编辑器",[425],{"type":25,"value":426},"🎯 可视化编辑器",{"type":19,"tag":28,"props":428,"children":429},{},[430],{"type":25,"value":431},"HTMLPAGE 提供直观的多设备预览和编辑：",{"type":19,"tag":28,"props":433,"children":434},{},[435],{"type":19,"tag":55,"props":436,"children":437},{},[438],{"type":25,"value":439},"功能特色：",{"type":19,"tag":61,"props":441,"children":442},{},[443,453,463,473],{"type":19,"tag":65,"props":444,"children":445},{},[446,451],{"type":19,"tag":55,"props":447,"children":448},{},[449],{"type":25,"value":450},"实时预览",{"type":25,"value":452},"：同时查看多设备效果",{"type":19,"tag":65,"props":454,"children":455},{},[456,461],{"type":19,"tag":55,"props":457,"children":458},{},[459],{"type":25,"value":460},"独立编辑",{"type":25,"value":462},"：每个断点独立调整",{"type":19,"tag":65,"props":464,"children":465},{},[466,471],{"type":19,"tag":55,"props":467,"children":468},{},[469],{"type":25,"value":470},"智能继承",{"type":25,"value":472},"：自动继承上级断点样式",{"type":19,"tag":65,"props":474,"children":475},{},[476,481],{"type":19,"tag":55,"props":477,"children":478},{},[479],{"type":25,"value":480},"触控模拟",{"type":25,"value":482},"：模拟移动设备触控交互",{"type":19,"tag":28,"props":484,"children":485},{},[486],{"type":19,"tag":55,"props":487,"children":488},{},[489],{"type":25,"value":490},"操作流程：",{"type":19,"tag":492,"props":493,"children":494},"ol",{},[495,500,505,510],{"type":19,"tag":65,"props":496,"children":497},{},[498],{"type":25,"value":499},"选择目标断点（手机/平板/桌面）",{"type":19,"tag":65,"props":501,"children":502},{},[503],{"type":25,"value":504},"调整布局、间距、字体大小",{"type":19,"tag":65,"props":506,"children":507},{},[508],{"type":25,"value":509},"切换设备查看效果",{"type":19,"tag":65,"props":511,"children":512},{},[513],{"type":25,"value":514},"微调直到完美适配",{"type":19,"tag":40,"props":516,"children":518},{"id":517},"灵活网格系统",[519],{"type":25,"value":520},"📏 灵活网格系统",{"type":19,"tag":28,"props":522,"children":523},{},[524],{"type":25,"value":525},"基于现代CSS Grid和Flexbox的响应式网格：",{"type":19,"tag":28,"props":527,"children":528},{},[529],{"type":19,"tag":55,"props":530,"children":531},{},[532],{"type":25,"value":533},"网格特点：",{"type":19,"tag":61,"props":535,"children":536},{},[537,542,547,552],{"type":19,"tag":65,"props":538,"children":539},{},[540],{"type":25,"value":541},"12栏响应式网格",{"type":19,"tag":65,"props":543,"children":544},{},[545],{"type":25,"value":546},"自动适配容器宽度",{"type":19,"tag":65,"props":548,"children":549},{},[550],{"type":25,"value":551},"支持复杂嵌套布局",{"type":19,"tag":65,"props":553,"children":554},{},[555],{"type":25,"value":556},"灵活的列宽比例",{"type":19,"tag":28,"props":558,"children":559},{},[560],{"type":19,"tag":55,"props":561,"children":562},{},[563],{"type":25,"value":564},"使用示例：",{"type":19,"tag":136,"props":566,"children":570},{"className":567,"code":568,"language":569,"meta":7,"style":7},"language-html shiki shiki-themes github-dark github-dark","\u003C!-- 移动端单列，桌面端三列 -->\n\u003Cdiv class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n  \u003Cdiv class=\"bg-white p-4\">内容1\u003C/div>\n  \u003Cdiv class=\"bg-white p-4\">内容2\u003C/div>\n  \u003Cdiv class=\"bg-white p-4\">内容3\u003C/div>\n\u003C/div>\n","html",[571],{"type":19,"tag":143,"props":572,"children":573},{"__ignoreMap":7},[574,582,618,656,692,728],{"type":19,"tag":147,"props":575,"children":576},{"class":149,"line":150},[577],{"type":19,"tag":147,"props":578,"children":579},{"style":154},[580],{"type":25,"value":581},"\u003C!-- 移动端单列，桌面端三列 -->\n",{"type":19,"tag":147,"props":583,"children":584},{"class":149,"line":160},[585,590,596,602,607,613],{"type":19,"tag":147,"props":586,"children":587},{"style":170},[588],{"type":25,"value":589},"\u003C",{"type":19,"tag":147,"props":591,"children":593},{"style":592},"--shiki-default:#85E89D;--shiki-dark:#85E89D",[594],{"type":25,"value":595},"div",{"type":19,"tag":147,"props":597,"children":599},{"style":598},"--shiki-default:#B392F0;--shiki-dark:#B392F0",[600],{"type":25,"value":601}," class",{"type":19,"tag":147,"props":603,"children":604},{"style":170},[605],{"type":25,"value":606},"=",{"type":19,"tag":147,"props":608,"children":610},{"style":609},"--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF",[611],{"type":25,"value":612},"\"grid grid-cols-1 md:grid-cols-3 gap-4\"",{"type":19,"tag":147,"props":614,"children":615},{"style":170},[616],{"type":25,"value":617},">\n",{"type":19,"tag":147,"props":619,"children":620},{"class":149,"line":202},[621,626,630,634,638,643,648,652],{"type":19,"tag":147,"props":622,"children":623},{"style":170},[624],{"type":25,"value":625},"  \u003C",{"type":19,"tag":147,"props":627,"children":628},{"style":592},[629],{"type":25,"value":595},{"type":19,"tag":147,"props":631,"children":632},{"style":598},[633],{"type":25,"value":601},{"type":19,"tag":147,"props":635,"children":636},{"style":170},[637],{"type":25,"value":606},{"type":19,"tag":147,"props":639,"children":640},{"style":609},[641],{"type":25,"value":642},"\"bg-white p-4\"",{"type":19,"tag":147,"props":644,"children":645},{"style":170},[646],{"type":25,"value":647},">内容1\u003C/",{"type":19,"tag":147,"props":649,"children":650},{"style":592},[651],{"type":25,"value":595},{"type":19,"tag":147,"props":653,"children":654},{"style":170},[655],{"type":25,"value":617},{"type":19,"tag":147,"props":657,"children":658},{"class":149,"line":212},[659,663,667,671,675,679,684,688],{"type":19,"tag":147,"props":660,"children":661},{"style":170},[662],{"type":25,"value":625},{"type":19,"tag":147,"props":664,"children":665},{"style":592},[666],{"type":25,"value":595},{"type":19,"tag":147,"props":668,"children":669},{"style":598},[670],{"type":25,"value":601},{"type":19,"tag":147,"props":672,"children":673},{"style":170},[674],{"type":25,"value":606},{"type":19,"tag":147,"props":676,"children":677},{"style":609},[678],{"type":25,"value":642},{"type":19,"tag":147,"props":680,"children":681},{"style":170},[682],{"type":25,"value":683},">内容2\u003C/",{"type":19,"tag":147,"props":685,"children":686},{"style":592},[687],{"type":25,"value":595},{"type":19,"tag":147,"props":689,"children":690},{"style":170},[691],{"type":25,"value":617},{"type":19,"tag":147,"props":693,"children":694},{"class":149,"line":221},[695,699,703,707,711,715,720,724],{"type":19,"tag":147,"props":696,"children":697},{"style":170},[698],{"type":25,"value":625},{"type":19,"tag":147,"props":700,"children":701},{"style":592},[702],{"type":25,"value":595},{"type":19,"tag":147,"props":704,"children":705},{"style":598},[706],{"type":25,"value":601},{"type":19,"tag":147,"props":708,"children":709},{"style":170},[710],{"type":25,"value":606},{"type":19,"tag":147,"props":712,"children":713},{"style":609},[714],{"type":25,"value":642},{"type":19,"tag":147,"props":716,"children":717},{"style":170},[718],{"type":25,"value":719},">内容3\u003C/",{"type":19,"tag":147,"props":721,"children":722},{"style":592},[723],{"type":25,"value":595},{"type":19,"tag":147,"props":725,"children":726},{"style":170},[727],{"type":25,"value":617},{"type":19,"tag":147,"props":729,"children":730},{"class":149,"line":286},[731,736,740],{"type":19,"tag":147,"props":732,"children":733},{"style":170},[734],{"type":25,"value":735},"\u003C/",{"type":19,"tag":147,"props":737,"children":738},{"style":592},[739],{"type":25,"value":595},{"type":19,"tag":147,"props":741,"children":742},{"style":170},[743],{"type":25,"value":617},{"type":19,"tag":40,"props":745,"children":747},{"id":746},"️-响应式图片",[748],{"type":25,"value":749},"🖼️ 响应式图片",{"type":19,"tag":28,"props":751,"children":752},{},[753],{"type":25,"value":754},"自动优化不同设备的图片显示：",{"type":19,"tag":28,"props":756,"children":757},{},[758],{"type":19,"tag":55,"props":759,"children":760},{},[761],{"type":25,"value":762},"智能特性：",{"type":19,"tag":61,"props":764,"children":765},{},[766,771,776,781],{"type":19,"tag":65,"props":767,"children":768},{},[769],{"type":25,"value":770},"自动生成多尺寸版本",{"type":19,"tag":65,"props":772,"children":773},{},[774],{"type":25,"value":775},"根据设备加载适当尺寸",{"type":19,"tag":65,"props":777,"children":778},{},[779],{"type":25,"value":780},"支持现代图片格式（WebP、AVIF）",{"type":19,"tag":65,"props":782,"children":783},{},[784],{"type":25,"value":785},"懒加载优化性能",{"type":19,"tag":28,"props":787,"children":788},{},[789],{"type":19,"tag":55,"props":790,"children":791},{},[792],{"type":25,"value":793},"实现方式：",{"type":19,"tag":136,"props":795,"children":797},{"className":567,"code":796,"language":569,"meta":7,"style":7},"\u003C!-- 响应式图片 -->\n\u003Cimg src=\"image-800.jpg\" \n     srcset=\"image-400.jpg 400w, \n             image-800.jpg 800w, \n             image-1200.jpg 1200w\"\n     sizes=\"(max-width: 768px) 100vw, \n            (max-width: 1024px) 50vw, \n            33vw\"\n     alt=\"响应式图片示例\">\n",[798],{"type":19,"tag":143,"props":799,"children":800},{"__ignoreMap":7},[801,809,840,857,865,873,890,898,906],{"type":19,"tag":147,"props":802,"children":803},{"class":149,"line":150},[804],{"type":19,"tag":147,"props":805,"children":806},{"style":154},[807],{"type":25,"value":808},"\u003C!-- 响应式图片 -->\n",{"type":19,"tag":147,"props":810,"children":811},{"class":149,"line":160},[812,816,821,826,830,835],{"type":19,"tag":147,"props":813,"children":814},{"style":170},[815],{"type":25,"value":589},{"type":19,"tag":147,"props":817,"children":818},{"style":592},[819],{"type":25,"value":820},"img",{"type":19,"tag":147,"props":822,"children":823},{"style":598},[824],{"type":25,"value":825}," src",{"type":19,"tag":147,"props":827,"children":828},{"style":170},[829],{"type":25,"value":606},{"type":19,"tag":147,"props":831,"children":832},{"style":609},[833],{"type":25,"value":834},"\"image-800.jpg\"",{"type":19,"tag":147,"props":836,"children":837},{"style":170},[838],{"type":25,"value":839}," \n",{"type":19,"tag":147,"props":841,"children":842},{"class":149,"line":202},[843,848,852],{"type":19,"tag":147,"props":844,"children":845},{"style":598},[846],{"type":25,"value":847},"     srcset",{"type":19,"tag":147,"props":849,"children":850},{"style":170},[851],{"type":25,"value":606},{"type":19,"tag":147,"props":853,"children":854},{"style":609},[855],{"type":25,"value":856},"\"image-400.jpg 400w, \n",{"type":19,"tag":147,"props":858,"children":859},{"class":149,"line":212},[860],{"type":19,"tag":147,"props":861,"children":862},{"style":609},[863],{"type":25,"value":864},"             image-800.jpg 800w, \n",{"type":19,"tag":147,"props":866,"children":867},{"class":149,"line":221},[868],{"type":19,"tag":147,"props":869,"children":870},{"style":609},[871],{"type":25,"value":872},"             image-1200.jpg 1200w\"\n",{"type":19,"tag":147,"props":874,"children":875},{"class":149,"line":286},[876,881,885],{"type":19,"tag":147,"props":877,"children":878},{"style":598},[879],{"type":25,"value":880},"     sizes",{"type":19,"tag":147,"props":882,"children":883},{"style":170},[884],{"type":25,"value":606},{"type":19,"tag":147,"props":886,"children":887},{"style":609},[888],{"type":25,"value":889},"\"(max-width: 768px) 100vw, \n",{"type":19,"tag":147,"props":891,"children":892},{"class":149,"line":294},[893],{"type":19,"tag":147,"props":894,"children":895},{"style":609},[896],{"type":25,"value":897},"            (max-width: 1024px) 50vw, \n",{"type":19,"tag":147,"props":899,"children":900},{"class":149,"line":303},[901],{"type":19,"tag":147,"props":902,"children":903},{"style":609},[904],{"type":25,"value":905},"            33vw\"\n",{"type":19,"tag":147,"props":907,"children":908},{"class":149,"line":336},[909,914,918,923],{"type":19,"tag":147,"props":910,"children":911},{"style":598},[912],{"type":25,"value":913},"     alt",{"type":19,"tag":147,"props":915,"children":916},{"style":170},[917],{"type":25,"value":606},{"type":19,"tag":147,"props":919,"children":920},{"style":609},[921],{"type":25,"value":922},"\"响应式图片示例\"",{"type":19,"tag":147,"props":924,"children":925},{"style":170},[926],{"type":25,"value":617},{"type":19,"tag":34,"props":928,"children":930},{"id":929},"响应式布局模式",[931],{"type":25,"value":929},{"type":19,"tag":40,"props":933,"children":935},{"id":934},"流式布局fluid-layout",[936],{"type":25,"value":937},"📐 流式布局（Fluid Layout）",{"type":19,"tag":28,"props":939,"children":940},{},[941],{"type":25,"value":942},"容器宽度使用百分比，自适应屏幕尺寸：",{"type":19,"tag":28,"props":944,"children":945},{},[946],{"type":19,"tag":55,"props":947,"children":948},{},[949],{"type":25,"value":950},"适用场景：",{"type":19,"tag":61,"props":952,"children":953},{},[954,959,964],{"type":19,"tag":65,"props":955,"children":956},{},[957],{"type":25,"value":958},"文字内容为主的页面",{"type":19,"tag":65,"props":960,"children":961},{},[962],{"type":25,"value":963},"需要充分利用屏幕宽度",{"type":19,"tag":65,"props":965,"children":966},{},[967],{"type":25,"value":968},"简单的单列或双列布局",{"type":19,"tag":28,"props":970,"children":971},{},[972],{"type":19,"tag":55,"props":973,"children":974},{},[975],{"type":25,"value":976},"CSS实现：",{"type":19,"tag":136,"props":978,"children":980},{"className":138,"code":979,"language":140,"meta":7,"style":7},".container {\n  width: 90%;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n",[981],{"type":19,"tag":143,"props":982,"children":983},{"__ignoreMap":7},[984,997,1024,1049,1075],{"type":19,"tag":147,"props":985,"children":986},{"class":149,"line":150},[987,992],{"type":19,"tag":147,"props":988,"children":989},{"style":598},[990],{"type":25,"value":991},".container",{"type":19,"tag":147,"props":993,"children":994},{"style":170},[995],{"type":25,"value":996}," {\n",{"type":19,"tag":147,"props":998,"children":999},{"class":149,"line":160},[1000,1005,1009,1014,1019],{"type":19,"tag":147,"props":1001,"children":1002},{"style":176},[1003],{"type":25,"value":1004},"  width",{"type":19,"tag":147,"props":1006,"children":1007},{"style":170},[1008],{"type":25,"value":184},{"type":19,"tag":147,"props":1010,"children":1011},{"style":176},[1012],{"type":25,"value":1013},"90",{"type":19,"tag":147,"props":1015,"children":1016},{"style":164},[1017],{"type":25,"value":1018},"%",{"type":19,"tag":147,"props":1020,"children":1021},{"style":170},[1022],{"type":25,"value":1023},";\n",{"type":19,"tag":147,"props":1025,"children":1026},{"class":149,"line":202},[1027,1032,1036,1041,1045],{"type":19,"tag":147,"props":1028,"children":1029},{"style":176},[1030],{"type":25,"value":1031},"  max-width",{"type":19,"tag":147,"props":1033,"children":1034},{"style":170},[1035],{"type":25,"value":184},{"type":19,"tag":147,"props":1037,"children":1038},{"style":176},[1039],{"type":25,"value":1040},"1200",{"type":19,"tag":147,"props":1042,"children":1043},{"style":164},[1044],{"type":25,"value":194},{"type":19,"tag":147,"props":1046,"children":1047},{"style":170},[1048],{"type":25,"value":1023},{"type":19,"tag":147,"props":1050,"children":1051},{"class":149,"line":212},[1052,1057,1061,1066,1071],{"type":19,"tag":147,"props":1053,"children":1054},{"style":176},[1055],{"type":25,"value":1056},"  margin",{"type":19,"tag":147,"props":1058,"children":1059},{"style":170},[1060],{"type":25,"value":184},{"type":19,"tag":147,"props":1062,"children":1063},{"style":176},[1064],{"type":25,"value":1065},"0",{"type":19,"tag":147,"props":1067,"children":1068},{"style":176},[1069],{"type":25,"value":1070}," auto",{"type":19,"tag":147,"props":1072,"children":1073},{"style":170},[1074],{"type":25,"value":1023},{"type":19,"tag":147,"props":1076,"children":1077},{"class":149,"line":221},[1078],{"type":19,"tag":147,"props":1079,"children":1080},{"style":170},[1081],{"type":25,"value":1082},"}\n",{"type":19,"tag":40,"props":1084,"children":1086},{"id":1085},"弹性盒布局flexbox",[1087],{"type":25,"value":1088},"🔲 弹性盒布局（Flexbox）",{"type":19,"tag":28,"props":1090,"children":1091},{},[1092],{"type":25,"value":1093},"一维布局的最佳解决方案：",{"type":19,"tag":28,"props":1095,"children":1096},{},[1097],{"type":19,"tag":55,"props":1098,"children":1099},{},[1100],{"type":25,"value":1101},"核心优势：",{"type":19,"tag":61,"props":1103,"children":1104},{},[1105,1110,1115,1120],{"type":19,"tag":65,"props":1106,"children":1107},{},[1108],{"type":25,"value":1109},"元素自动分配空间",{"type":19,"tag":65,"props":1111,"children":1112},{},[1113],{"type":25,"value":1114},"轻松实现垂直居中",{"type":19,"tag":65,"props":1116,"children":1117},{},[1118],{"type":25,"value":1119},"灵活的排列和对齐",{"type":19,"tag":65,"props":1121,"children":1122},{},[1123],{"type":25,"value":1124},"自适应内容长度",{"type":19,"tag":28,"props":1126,"children":1127},{},[1128],{"type":19,"tag":55,"props":1129,"children":1130},{},[1131],{"type":25,"value":1132},"常用模式：",{"type":19,"tag":136,"props":1134,"children":1136},{"className":138,"code":1135,"language":140,"meta":7,"style":7},"/* 水平排列，等分空间 */\n.flex-container {\n  display: flex;\n  gap: 1rem;\n}\n\n.flex-item {\n  flex: 1; /* 等分剩余空间 */\n}\n",[1137],{"type":19,"tag":143,"props":1138,"children":1139},{"__ignoreMap":7},[1140,1148,1160,1181,1207,1214,1221,1233,1259],{"type":19,"tag":147,"props":1141,"children":1142},{"class":149,"line":150},[1143],{"type":19,"tag":147,"props":1144,"children":1145},{"style":154},[1146],{"type":25,"value":1147},"/* 水平排列，等分空间 */\n",{"type":19,"tag":147,"props":1149,"children":1150},{"class":149,"line":160},[1151,1156],{"type":19,"tag":147,"props":1152,"children":1153},{"style":598},[1154],{"type":25,"value":1155},".flex-container",{"type":19,"tag":147,"props":1157,"children":1158},{"style":170},[1159],{"type":25,"value":996},{"type":19,"tag":147,"props":1161,"children":1162},{"class":149,"line":202},[1163,1168,1172,1177],{"type":19,"tag":147,"props":1164,"children":1165},{"style":176},[1166],{"type":25,"value":1167},"  display",{"type":19,"tag":147,"props":1169,"children":1170},{"style":170},[1171],{"type":25,"value":184},{"type":19,"tag":147,"props":1173,"children":1174},{"style":176},[1175],{"type":25,"value":1176},"flex",{"type":19,"tag":147,"props":1178,"children":1179},{"style":170},[1180],{"type":25,"value":1023},{"type":19,"tag":147,"props":1182,"children":1183},{"class":149,"line":212},[1184,1189,1193,1198,1203],{"type":19,"tag":147,"props":1185,"children":1186},{"style":176},[1187],{"type":25,"value":1188},"  gap",{"type":19,"tag":147,"props":1190,"children":1191},{"style":170},[1192],{"type":25,"value":184},{"type":19,"tag":147,"props":1194,"children":1195},{"style":176},[1196],{"type":25,"value":1197},"1",{"type":19,"tag":147,"props":1199,"children":1200},{"style":164},[1201],{"type":25,"value":1202},"rem",{"type":19,"tag":147,"props":1204,"children":1205},{"style":170},[1206],{"type":25,"value":1023},{"type":19,"tag":147,"props":1208,"children":1209},{"class":149,"line":221},[1210],{"type":19,"tag":147,"props":1211,"children":1212},{"style":170},[1213],{"type":25,"value":1082},{"type":19,"tag":147,"props":1215,"children":1216},{"class":149,"line":286},[1217],{"type":19,"tag":147,"props":1218,"children":1219},{"emptyLinePlaceholder":206},[1220],{"type":25,"value":209},{"type":19,"tag":147,"props":1222,"children":1223},{"class":149,"line":294},[1224,1229],{"type":19,"tag":147,"props":1225,"children":1226},{"style":598},[1227],{"type":25,"value":1228},".flex-item",{"type":19,"tag":147,"props":1230,"children":1231},{"style":170},[1232],{"type":25,"value":996},{"type":19,"tag":147,"props":1234,"children":1235},{"class":149,"line":303},[1236,1241,1245,1249,1254],{"type":19,"tag":147,"props":1237,"children":1238},{"style":176},[1239],{"type":25,"value":1240},"  flex",{"type":19,"tag":147,"props":1242,"children":1243},{"style":170},[1244],{"type":25,"value":184},{"type":19,"tag":147,"props":1246,"children":1247},{"style":176},[1248],{"type":25,"value":1197},{"type":19,"tag":147,"props":1250,"children":1251},{"style":170},[1252],{"type":25,"value":1253},"; ",{"type":19,"tag":147,"props":1255,"children":1256},{"style":154},[1257],{"type":25,"value":1258},"/* 等分剩余空间 */\n",{"type":19,"tag":147,"props":1260,"children":1261},{"class":149,"line":336},[1262],{"type":19,"tag":147,"props":1263,"children":1264},{"style":170},[1265],{"type":25,"value":1082},{"type":19,"tag":40,"props":1267,"children":1269},{"id":1268},"网格布局css-grid",[1270],{"type":25,"value":1271},"🎯 网格布局（CSS Grid）",{"type":19,"tag":28,"props":1273,"children":1274},{},[1275],{"type":25,"value":1276},"二维布局的强大工具：",{"type":19,"tag":28,"props":1278,"children":1279},{},[1280],{"type":19,"tag":55,"props":1281,"children":1282},{},[1283],{"type":25,"value":1284},"应用场景：",{"type":19,"tag":61,"props":1286,"children":1287},{},[1288,1293,1298,1303],{"type":19,"tag":65,"props":1289,"children":1290},{},[1291],{"type":25,"value":1292},"复杂的多区域布局",{"type":19,"tag":65,"props":1294,"children":1295},{},[1296],{"type":25,"value":1297},"卡片网格排列",{"type":19,"tag":65,"props":1299,"children":1300},{},[1301],{"type":25,"value":1302},"响应式模块系统",{"type":19,"tag":65,"props":1304,"children":1305},{},[1306],{"type":25,"value":1307},"杂志式版面设计",{"type":19,"tag":28,"props":1309,"children":1310},{},[1311],{"type":19,"tag":55,"props":1312,"children":1313},{},[1314],{"type":25,"value":1315},"响应式网格：",{"type":19,"tag":136,"props":1317,"children":1319},{"className":138,"code":1318,"language":140,"meta":7,"style":7},".grid-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 2rem;\n}\n",[1320],{"type":19,"tag":143,"props":1321,"children":1322},{"__ignoreMap":7},[1323,1335,1355,1423,1447],{"type":19,"tag":147,"props":1324,"children":1325},{"class":149,"line":150},[1326,1331],{"type":19,"tag":147,"props":1327,"children":1328},{"style":598},[1329],{"type":25,"value":1330},".grid-container",{"type":19,"tag":147,"props":1332,"children":1333},{"style":170},[1334],{"type":25,"value":996},{"type":19,"tag":147,"props":1336,"children":1337},{"class":149,"line":160},[1338,1342,1346,1351],{"type":19,"tag":147,"props":1339,"children":1340},{"style":176},[1341],{"type":25,"value":1167},{"type":19,"tag":147,"props":1343,"children":1344},{"style":170},[1345],{"type":25,"value":184},{"type":19,"tag":147,"props":1347,"children":1348},{"style":176},[1349],{"type":25,"value":1350},"grid",{"type":19,"tag":147,"props":1352,"children":1353},{"style":170},[1354],{"type":25,"value":1023},{"type":19,"tag":147,"props":1356,"children":1357},{"class":149,"line":202},[1358,1363,1367,1372,1377,1382,1387,1392,1396,1401,1405,1409,1413,1418],{"type":19,"tag":147,"props":1359,"children":1360},{"style":176},[1361],{"type":25,"value":1362},"  grid-template-columns",{"type":19,"tag":147,"props":1364,"children":1365},{"style":170},[1366],{"type":25,"value":184},{"type":19,"tag":147,"props":1368,"children":1369},{"style":176},[1370],{"type":25,"value":1371},"repeat",{"type":19,"tag":147,"props":1373,"children":1374},{"style":170},[1375],{"type":25,"value":1376},"(",{"type":19,"tag":147,"props":1378,"children":1379},{"style":176},[1380],{"type":25,"value":1381},"auto-fit",{"type":19,"tag":147,"props":1383,"children":1384},{"style":170},[1385],{"type":25,"value":1386},", ",{"type":19,"tag":147,"props":1388,"children":1389},{"style":176},[1390],{"type":25,"value":1391},"minmax",{"type":19,"tag":147,"props":1393,"children":1394},{"style":170},[1395],{"type":25,"value":1376},{"type":19,"tag":147,"props":1397,"children":1398},{"style":176},[1399],{"type":25,"value":1400},"300",{"type":19,"tag":147,"props":1402,"children":1403},{"style":164},[1404],{"type":25,"value":194},{"type":19,"tag":147,"props":1406,"children":1407},{"style":170},[1408],{"type":25,"value":1386},{"type":19,"tag":147,"props":1410,"children":1411},{"style":176},[1412],{"type":25,"value":1197},{"type":19,"tag":147,"props":1414,"children":1415},{"style":164},[1416],{"type":25,"value":1417},"fr",{"type":19,"tag":147,"props":1419,"children":1420},{"style":170},[1421],{"type":25,"value":1422},"));\n",{"type":19,"tag":147,"props":1424,"children":1425},{"class":149,"line":212},[1426,1430,1434,1439,1443],{"type":19,"tag":147,"props":1427,"children":1428},{"style":176},[1429],{"type":25,"value":1188},{"type":19,"tag":147,"props":1431,"children":1432},{"style":170},[1433],{"type":25,"value":184},{"type":19,"tag":147,"props":1435,"children":1436},{"style":176},[1437],{"type":25,"value":1438},"2",{"type":19,"tag":147,"props":1440,"children":1441},{"style":164},[1442],{"type":25,"value":1202},{"type":19,"tag":147,"props":1444,"children":1445},{"style":170},[1446],{"type":25,"value":1023},{"type":19,"tag":147,"props":1448,"children":1449},{"class":149,"line":221},[1450],{"type":19,"tag":147,"props":1451,"children":1452},{"style":170},[1453],{"type":25,"value":1082},{"type":19,"tag":34,"props":1455,"children":1457},{"id":1456},"移动端优化策略",[1458],{"type":25,"value":1456},{"type":19,"tag":40,"props":1460,"children":1462},{"id":1461},"触控友好设计",[1463],{"type":25,"value":1464},"👆 触控友好设计",{"type":19,"tag":28,"props":1466,"children":1467},{},[1468],{"type":25,"value":1469},"为触屏设备优化交互体验：",{"type":19,"tag":28,"props":1471,"children":1472},{},[1473],{"type":19,"tag":55,"props":1474,"children":1475},{},[1476],{"type":25,"value":1477},"设计原则：",{"type":19,"tag":61,"props":1479,"children":1480},{},[1481,1491,1501,1511],{"type":19,"tag":65,"props":1482,"children":1483},{},[1484,1489],{"type":19,"tag":55,"props":1485,"children":1486},{},[1487],{"type":25,"value":1488},"按钮尺寸",{"type":25,"value":1490},"：最小44x44px（苹果建议）",{"type":19,"tag":65,"props":1492,"children":1493},{},[1494,1499],{"type":19,"tag":55,"props":1495,"children":1496},{},[1497],{"type":25,"value":1498},"间距充足",{"type":25,"value":1500},"：按钮间距至少8px",{"type":19,"tag":65,"props":1502,"children":1503},{},[1504,1509],{"type":19,"tag":55,"props":1505,"children":1506},{},[1507],{"type":25,"value":1508},"可点击区域",{"type":25,"value":1510},"：清晰的视觉边界",{"type":19,"tag":65,"props":1512,"children":1513},{},[1514,1519],{"type":19,"tag":55,"props":1515,"children":1516},{},[1517],{"type":25,"value":1518},"手势支持",{"type":25,"value":1520},"：滑动、拖拽、双击",{"type":19,"tag":28,"props":1522,"children":1523},{},[1524],{"type":19,"tag":55,"props":1525,"children":1526},{},[1527],{"type":25,"value":1528},"实现技巧：",{"type":19,"tag":136,"props":1530,"children":1532},{"className":138,"code":1531,"language":140,"meta":7,"style":7},"/* 触控友好的按钮 */\n.touch-button {\n  min-height: 44px;\n  min-width: 44px;\n  padding: 12px 24px;\n  touch-action: manipulation; /* 禁用双击缩放 */\n}\n",[1533],{"type":19,"tag":143,"props":1534,"children":1535},{"__ignoreMap":7},[1536,1544,1556,1581,1605,1639,1665],{"type":19,"tag":147,"props":1537,"children":1538},{"class":149,"line":150},[1539],{"type":19,"tag":147,"props":1540,"children":1541},{"style":154},[1542],{"type":25,"value":1543},"/* 触控友好的按钮 */\n",{"type":19,"tag":147,"props":1545,"children":1546},{"class":149,"line":160},[1547,1552],{"type":19,"tag":147,"props":1548,"children":1549},{"style":598},[1550],{"type":25,"value":1551},".touch-button",{"type":19,"tag":147,"props":1553,"children":1554},{"style":170},[1555],{"type":25,"value":996},{"type":19,"tag":147,"props":1557,"children":1558},{"class":149,"line":202},[1559,1564,1568,1573,1577],{"type":19,"tag":147,"props":1560,"children":1561},{"style":176},[1562],{"type":25,"value":1563},"  min-height",{"type":19,"tag":147,"props":1565,"children":1566},{"style":170},[1567],{"type":25,"value":184},{"type":19,"tag":147,"props":1569,"children":1570},{"style":176},[1571],{"type":25,"value":1572},"44",{"type":19,"tag":147,"props":1574,"children":1575},{"style":164},[1576],{"type":25,"value":194},{"type":19,"tag":147,"props":1578,"children":1579},{"style":170},[1580],{"type":25,"value":1023},{"type":19,"tag":147,"props":1582,"children":1583},{"class":149,"line":212},[1584,1589,1593,1597,1601],{"type":19,"tag":147,"props":1585,"children":1586},{"style":176},[1587],{"type":25,"value":1588},"  min-width",{"type":19,"tag":147,"props":1590,"children":1591},{"style":170},[1592],{"type":25,"value":184},{"type":19,"tag":147,"props":1594,"children":1595},{"style":176},[1596],{"type":25,"value":1572},{"type":19,"tag":147,"props":1598,"children":1599},{"style":164},[1600],{"type":25,"value":194},{"type":19,"tag":147,"props":1602,"children":1603},{"style":170},[1604],{"type":25,"value":1023},{"type":19,"tag":147,"props":1606,"children":1607},{"class":149,"line":221},[1608,1613,1617,1622,1626,1631,1635],{"type":19,"tag":147,"props":1609,"children":1610},{"style":176},[1611],{"type":25,"value":1612},"  padding",{"type":19,"tag":147,"props":1614,"children":1615},{"style":170},[1616],{"type":25,"value":184},{"type":19,"tag":147,"props":1618,"children":1619},{"style":176},[1620],{"type":25,"value":1621},"12",{"type":19,"tag":147,"props":1623,"children":1624},{"style":164},[1625],{"type":25,"value":194},{"type":19,"tag":147,"props":1627,"children":1628},{"style":176},[1629],{"type":25,"value":1630}," 24",{"type":19,"tag":147,"props":1632,"children":1633},{"style":164},[1634],{"type":25,"value":194},{"type":19,"tag":147,"props":1636,"children":1637},{"style":170},[1638],{"type":25,"value":1023},{"type":19,"tag":147,"props":1640,"children":1641},{"class":149,"line":286},[1642,1647,1651,1656,1660],{"type":19,"tag":147,"props":1643,"children":1644},{"style":176},[1645],{"type":25,"value":1646},"  touch-action",{"type":19,"tag":147,"props":1648,"children":1649},{"style":170},[1650],{"type":25,"value":184},{"type":19,"tag":147,"props":1652,"children":1653},{"style":176},[1654],{"type":25,"value":1655},"manipulation",{"type":19,"tag":147,"props":1657,"children":1658},{"style":170},[1659],{"type":25,"value":1253},{"type":19,"tag":147,"props":1661,"children":1662},{"style":154},[1663],{"type":25,"value":1664},"/* 禁用双击缩放 */\n",{"type":19,"tag":147,"props":1666,"children":1667},{"class":149,"line":294},[1668],{"type":19,"tag":147,"props":1669,"children":1670},{"style":170},[1671],{"type":25,"value":1082},{"type":19,"tag":40,"props":1673,"children":1675},{"id":1674},"移动端文字优化",[1676],{"type":25,"value":1677},"📝 移动端文字优化",{"type":19,"tag":28,"props":1679,"children":1680},{},[1681],{"type":25,"value":1682},"确保文字在小屏幕上清晰可读：",{"type":19,"tag":28,"props":1684,"children":1685},{},[1686],{"type":19,"tag":55,"props":1687,"children":1688},{},[1689],{"type":25,"value":1690},"字体设置：",{"type":19,"tag":61,"props":1692,"children":1693},{},[1694,1704,1714,1724],{"type":19,"tag":65,"props":1695,"children":1696},{},[1697,1702],{"type":19,"tag":55,"props":1698,"children":1699},{},[1700],{"type":25,"value":1701},"基础字号",{"type":25,"value":1703},"：16px或以上（避免iOS自动缩放）",{"type":19,"tag":65,"props":1705,"children":1706},{},[1707,1712],{"type":19,"tag":55,"props":1708,"children":1709},{},[1710],{"type":25,"value":1711},"行高比例",{"type":25,"value":1713},"：1.4-1.6之间",{"type":19,"tag":65,"props":1715,"children":1716},{},[1717,1722],{"type":19,"tag":55,"props":1718,"children":1719},{},[1720],{"type":25,"value":1721},"字体选择",{"type":25,"value":1723},"：系统字体优先",{"type":19,"tag":65,"props":1725,"children":1726},{},[1727,1732],{"type":19,"tag":55,"props":1728,"children":1729},{},[1730],{"type":25,"value":1731},"对比度",{"type":25,"value":1733},"：确保足够的颜色对比",{"type":19,"tag":28,"props":1735,"children":1736},{},[1737],{"type":19,"tag":55,"props":1738,"children":1739},{},[1740],{"type":25,"value":1741},"CSS示例：",{"type":19,"tag":136,"props":1743,"children":1745},{"className":138,"code":1744,"language":140,"meta":7,"style":7},"body {\n  font-size: 16px;\n  line-height: 1.5;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n/* 移动端标题调整 */\n@media (max-width: 767px) {\n  h1 { font-size: 2rem; }\n  h2 { font-size: 1.5rem; }\n  p { font-size: 1rem; }\n}\n",[1746],{"type":19,"tag":143,"props":1747,"children":1748},{"__ignoreMap":7},[1749,1761,1786,1807,1848,1855,1862,1870,1902,1937,1969,2001],{"type":19,"tag":147,"props":1750,"children":1751},{"class":149,"line":150},[1752,1757],{"type":19,"tag":147,"props":1753,"children":1754},{"style":592},[1755],{"type":25,"value":1756},"body",{"type":19,"tag":147,"props":1758,"children":1759},{"style":170},[1760],{"type":25,"value":996},{"type":19,"tag":147,"props":1762,"children":1763},{"class":149,"line":160},[1764,1769,1773,1778,1782],{"type":19,"tag":147,"props":1765,"children":1766},{"style":176},[1767],{"type":25,"value":1768},"  font-size",{"type":19,"tag":147,"props":1770,"children":1771},{"style":170},[1772],{"type":25,"value":184},{"type":19,"tag":147,"props":1774,"children":1775},{"style":176},[1776],{"type":25,"value":1777},"16",{"type":19,"tag":147,"props":1779,"children":1780},{"style":164},[1781],{"type":25,"value":194},{"type":19,"tag":147,"props":1783,"children":1784},{"style":170},[1785],{"type":25,"value":1023},{"type":19,"tag":147,"props":1787,"children":1788},{"class":149,"line":202},[1789,1794,1798,1803],{"type":19,"tag":147,"props":1790,"children":1791},{"style":176},[1792],{"type":25,"value":1793},"  line-height",{"type":19,"tag":147,"props":1795,"children":1796},{"style":170},[1797],{"type":25,"value":184},{"type":19,"tag":147,"props":1799,"children":1800},{"style":176},[1801],{"type":25,"value":1802},"1.5",{"type":19,"tag":147,"props":1804,"children":1805},{"style":170},[1806],{"type":25,"value":1023},{"type":19,"tag":147,"props":1808,"children":1809},{"class":149,"line":212},[1810,1815,1819,1824,1829,1834,1839,1844],{"type":19,"tag":147,"props":1811,"children":1812},{"style":176},[1813],{"type":25,"value":1814},"  font-family",{"type":19,"tag":147,"props":1816,"children":1817},{"style":170},[1818],{"type":25,"value":184},{"type":19,"tag":147,"props":1820,"children":1821},{"style":176},[1822],{"type":25,"value":1823},"-apple-system",{"type":19,"tag":147,"props":1825,"children":1826},{"style":170},[1827],{"type":25,"value":1828},", BlinkMacSystemFont, ",{"type":19,"tag":147,"props":1830,"children":1831},{"style":609},[1832],{"type":25,"value":1833},"\"Segoe UI\"",{"type":19,"tag":147,"props":1835,"children":1836},{"style":170},[1837],{"type":25,"value":1838},", Roboto, ",{"type":19,"tag":147,"props":1840,"children":1841},{"style":176},[1842],{"type":25,"value":1843},"sans-serif",{"type":19,"tag":147,"props":1845,"children":1846},{"style":170},[1847],{"type":25,"value":1023},{"type":19,"tag":147,"props":1849,"children":1850},{"class":149,"line":221},[1851],{"type":19,"tag":147,"props":1852,"children":1853},{"style":170},[1854],{"type":25,"value":1082},{"type":19,"tag":147,"props":1856,"children":1857},{"class":149,"line":286},[1858],{"type":19,"tag":147,"props":1859,"children":1860},{"emptyLinePlaceholder":206},[1861],{"type":25,"value":209},{"type":19,"tag":147,"props":1863,"children":1864},{"class":149,"line":294},[1865],{"type":19,"tag":147,"props":1866,"children":1867},{"style":154},[1868],{"type":25,"value":1869},"/* 移动端标题调整 */\n",{"type":19,"tag":147,"props":1871,"children":1872},{"class":149,"line":303},[1873,1877,1881,1885,1889,1893,1897],{"type":19,"tag":147,"props":1874,"children":1875},{"style":164},[1876],{"type":25,"value":167},{"type":19,"tag":147,"props":1878,"children":1879},{"style":170},[1880],{"type":25,"value":173},{"type":19,"tag":147,"props":1882,"children":1883},{"style":176},[1884],{"type":25,"value":179},{"type":19,"tag":147,"props":1886,"children":1887},{"style":170},[1888],{"type":25,"value":184},{"type":19,"tag":147,"props":1890,"children":1891},{"style":176},[1892],{"type":25,"value":189},{"type":19,"tag":147,"props":1894,"children":1895},{"style":164},[1896],{"type":25,"value":194},{"type":19,"tag":147,"props":1898,"children":1899},{"style":170},[1900],{"type":25,"value":1901},") {\n",{"type":19,"tag":147,"props":1903,"children":1904},{"class":149,"line":336},[1905,1910,1915,1920,1924,1928,1932],{"type":19,"tag":147,"props":1906,"children":1907},{"style":592},[1908],{"type":25,"value":1909},"  h1",{"type":19,"tag":147,"props":1911,"children":1912},{"style":170},[1913],{"type":25,"value":1914}," { ",{"type":19,"tag":147,"props":1916,"children":1917},{"style":176},[1918],{"type":25,"value":1919},"font-size",{"type":19,"tag":147,"props":1921,"children":1922},{"style":170},[1923],{"type":25,"value":184},{"type":19,"tag":147,"props":1925,"children":1926},{"style":176},[1927],{"type":25,"value":1438},{"type":19,"tag":147,"props":1929,"children":1930},{"style":164},[1931],{"type":25,"value":1202},{"type":19,"tag":147,"props":1933,"children":1934},{"style":170},[1935],{"type":25,"value":1936},"; }\n",{"type":19,"tag":147,"props":1938,"children":1939},{"class":149,"line":344},[1940,1945,1949,1953,1957,1961,1965],{"type":19,"tag":147,"props":1941,"children":1942},{"style":592},[1943],{"type":25,"value":1944},"  h2",{"type":19,"tag":147,"props":1946,"children":1947},{"style":170},[1948],{"type":25,"value":1914},{"type":19,"tag":147,"props":1950,"children":1951},{"style":176},[1952],{"type":25,"value":1919},{"type":19,"tag":147,"props":1954,"children":1955},{"style":170},[1956],{"type":25,"value":184},{"type":19,"tag":147,"props":1958,"children":1959},{"style":176},[1960],{"type":25,"value":1802},{"type":19,"tag":147,"props":1962,"children":1963},{"style":164},[1964],{"type":25,"value":1202},{"type":19,"tag":147,"props":1966,"children":1967},{"style":170},[1968],{"type":25,"value":1936},{"type":19,"tag":147,"props":1970,"children":1971},{"class":149,"line":353},[1972,1977,1981,1985,1989,1993,1997],{"type":19,"tag":147,"props":1973,"children":1974},{"style":592},[1975],{"type":25,"value":1976},"  p",{"type":19,"tag":147,"props":1978,"children":1979},{"style":170},[1980],{"type":25,"value":1914},{"type":19,"tag":147,"props":1982,"children":1983},{"style":176},[1984],{"type":25,"value":1919},{"type":19,"tag":147,"props":1986,"children":1987},{"style":170},[1988],{"type":25,"value":184},{"type":19,"tag":147,"props":1990,"children":1991},{"style":176},[1992],{"type":25,"value":1197},{"type":19,"tag":147,"props":1994,"children":1995},{"style":164},[1996],{"type":25,"value":1202},{"type":19,"tag":147,"props":1998,"children":1999},{"style":170},[2000],{"type":25,"value":1936},{"type":19,"tag":147,"props":2002,"children":2004},{"class":149,"line":2003},12,[2005],{"type":19,"tag":147,"props":2006,"children":2007},{"style":170},[2008],{"type":25,"value":1082},{"type":19,"tag":40,"props":2010,"children":2012},{"id":2011},"移动端性能优化",[2013],{"type":25,"value":2014},"🚀 移动端性能优化",{"type":19,"tag":28,"props":2016,"children":2017},{},[2018],{"type":25,"value":2019},"提升移动设备的加载和运行性能：",{"type":19,"tag":28,"props":2021,"children":2022},{},[2023],{"type":19,"tag":55,"props":2024,"children":2025},{},[2026],{"type":25,"value":2027},"优化策略：",{"type":19,"tag":492,"props":2029,"children":2030},{},[2031,2041,2051,2061,2071],{"type":19,"tag":65,"props":2032,"children":2033},{},[2034,2039],{"type":19,"tag":55,"props":2035,"children":2036},{},[2037],{"type":25,"value":2038},"图片优化",{"type":25,"value":2040},"：压缩和格式选择",{"type":19,"tag":65,"props":2042,"children":2043},{},[2044,2049],{"type":19,"tag":55,"props":2045,"children":2046},{},[2047],{"type":25,"value":2048},"代码压缩",{"type":25,"value":2050},"：CSS、JS文件压缩",{"type":19,"tag":65,"props":2052,"children":2053},{},[2054,2059],{"type":19,"tag":55,"props":2055,"children":2056},{},[2057],{"type":25,"value":2058},"懒加载",{"type":25,"value":2060},"：延迟加载非关键资源",{"type":19,"tag":65,"props":2062,"children":2063},{},[2064,2069],{"type":19,"tag":55,"props":2065,"children":2066},{},[2067],{"type":25,"value":2068},"缓存策略",{"type":25,"value":2070},"：合理设置浏览器缓存",{"type":19,"tag":65,"props":2072,"children":2073},{},[2074,2079],{"type":19,"tag":55,"props":2075,"children":2076},{},[2077],{"type":25,"value":2078},"CDN加速",{"type":25,"value":2080},"：使用内容分发网络",{"type":19,"tag":34,"props":2082,"children":2084},{"id":2083},"常见响应式挑战与解决方案",[2085],{"type":25,"value":2083},{"type":19,"tag":40,"props":2087,"children":2089},{"id":2088},"表格响应式处理",[2090],{"type":25,"value":2091},"📊 表格响应式处理",{"type":19,"tag":28,"props":2093,"children":2094},{},[2095],{"type":25,"value":2096},"表格在移动端的显示挑战：",{"type":19,"tag":28,"props":2098,"children":2099},{},[2100],{"type":19,"tag":55,"props":2101,"children":2102},{},[2103],{"type":25,"value":2104},"解决方案1：水平滚动",{"type":19,"tag":136,"props":2106,"children":2108},{"className":138,"code":2107,"language":140,"meta":7,"style":7},".table-container {\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n",[2109],{"type":19,"tag":143,"props":2110,"children":2111},{"__ignoreMap":7},[2112,2124,2145,2166],{"type":19,"tag":147,"props":2113,"children":2114},{"class":149,"line":150},[2115,2120],{"type":19,"tag":147,"props":2116,"children":2117},{"style":598},[2118],{"type":25,"value":2119},".table-container",{"type":19,"tag":147,"props":2121,"children":2122},{"style":170},[2123],{"type":25,"value":996},{"type":19,"tag":147,"props":2125,"children":2126},{"class":149,"line":160},[2127,2132,2136,2141],{"type":19,"tag":147,"props":2128,"children":2129},{"style":176},[2130],{"type":25,"value":2131},"  overflow-x",{"type":19,"tag":147,"props":2133,"children":2134},{"style":170},[2135],{"type":25,"value":184},{"type":19,"tag":147,"props":2137,"children":2138},{"style":176},[2139],{"type":25,"value":2140},"auto",{"type":19,"tag":147,"props":2142,"children":2143},{"style":170},[2144],{"type":25,"value":1023},{"type":19,"tag":147,"props":2146,"children":2147},{"class":149,"line":202},[2148,2153,2157,2162],{"type":19,"tag":147,"props":2149,"children":2150},{"style":176},[2151],{"type":25,"value":2152},"  -webkit-overflow-scrolling",{"type":19,"tag":147,"props":2154,"children":2155},{"style":170},[2156],{"type":25,"value":184},{"type":19,"tag":147,"props":2158,"children":2159},{"style":176},[2160],{"type":25,"value":2161},"touch",{"type":19,"tag":147,"props":2163,"children":2164},{"style":170},[2165],{"type":25,"value":1023},{"type":19,"tag":147,"props":2167,"children":2168},{"class":149,"line":212},[2169],{"type":19,"tag":147,"props":2170,"children":2171},{"style":170},[2172],{"type":25,"value":1082},{"type":19,"tag":28,"props":2174,"children":2175},{},[2176],{"type":19,"tag":55,"props":2177,"children":2178},{},[2179],{"type":25,"value":2180},"解决方案2：卡片式布局",{"type":19,"tag":136,"props":2182,"children":2184},{"className":138,"code":2183,"language":140,"meta":7,"style":7},"@media (max-width: 767px) {\n  table, thead, tbody, th, td, tr {\n    display: block;\n  }\n  \n  td {\n    border: none;\n    position: relative;\n    padding-left: 50%;\n  }\n  \n  td:before {\n    content: attr(data-label);\n    position: absolute;\n    left: 6px;\n    width: 45%;\n    font-weight: bold;\n  }\n}\n",[2185],{"type":19,"tag":143,"props":2186,"children":2187},{"__ignoreMap":7},[2188,2219,2276,2297,2305,2313,2325,2346,2367,2392,2399,2406,2422,2455,2476,2502,2528,2550,2558],{"type":19,"tag":147,"props":2189,"children":2190},{"class":149,"line":150},[2191,2195,2199,2203,2207,2211,2215],{"type":19,"tag":147,"props":2192,"children":2193},{"style":164},[2194],{"type":25,"value":167},{"type":19,"tag":147,"props":2196,"children":2197},{"style":170},[2198],{"type":25,"value":173},{"type":19,"tag":147,"props":2200,"children":2201},{"style":176},[2202],{"type":25,"value":179},{"type":19,"tag":147,"props":2204,"children":2205},{"style":170},[2206],{"type":25,"value":184},{"type":19,"tag":147,"props":2208,"children":2209},{"style":176},[2210],{"type":25,"value":189},{"type":19,"tag":147,"props":2212,"children":2213},{"style":164},[2214],{"type":25,"value":194},{"type":19,"tag":147,"props":2216,"children":2217},{"style":170},[2218],{"type":25,"value":1901},{"type":19,"tag":147,"props":2220,"children":2221},{"class":149,"line":160},[2222,2227,2231,2236,2240,2245,2249,2254,2258,2263,2267,2272],{"type":19,"tag":147,"props":2223,"children":2224},{"style":592},[2225],{"type":25,"value":2226},"  table",{"type":19,"tag":147,"props":2228,"children":2229},{"style":170},[2230],{"type":25,"value":1386},{"type":19,"tag":147,"props":2232,"children":2233},{"style":592},[2234],{"type":25,"value":2235},"thead",{"type":19,"tag":147,"props":2237,"children":2238},{"style":170},[2239],{"type":25,"value":1386},{"type":19,"tag":147,"props":2241,"children":2242},{"style":592},[2243],{"type":25,"value":2244},"tbody",{"type":19,"tag":147,"props":2246,"children":2247},{"style":170},[2248],{"type":25,"value":1386},{"type":19,"tag":147,"props":2250,"children":2251},{"style":592},[2252],{"type":25,"value":2253},"th",{"type":19,"tag":147,"props":2255,"children":2256},{"style":170},[2257],{"type":25,"value":1386},{"type":19,"tag":147,"props":2259,"children":2260},{"style":592},[2261],{"type":25,"value":2262},"td",{"type":19,"tag":147,"props":2264,"children":2265},{"style":170},[2266],{"type":25,"value":1386},{"type":19,"tag":147,"props":2268,"children":2269},{"style":592},[2270],{"type":25,"value":2271},"tr",{"type":19,"tag":147,"props":2273,"children":2274},{"style":170},[2275],{"type":25,"value":996},{"type":19,"tag":147,"props":2277,"children":2278},{"class":149,"line":202},[2279,2284,2288,2293],{"type":19,"tag":147,"props":2280,"children":2281},{"style":176},[2282],{"type":25,"value":2283},"    display",{"type":19,"tag":147,"props":2285,"children":2286},{"style":170},[2287],{"type":25,"value":184},{"type":19,"tag":147,"props":2289,"children":2290},{"style":176},[2291],{"type":25,"value":2292},"block",{"type":19,"tag":147,"props":2294,"children":2295},{"style":170},[2296],{"type":25,"value":1023},{"type":19,"tag":147,"props":2298,"children":2299},{"class":149,"line":212},[2300],{"type":19,"tag":147,"props":2301,"children":2302},{"style":170},[2303],{"type":25,"value":2304},"  }\n",{"type":19,"tag":147,"props":2306,"children":2307},{"class":149,"line":221},[2308],{"type":19,"tag":147,"props":2309,"children":2310},{"style":170},[2311],{"type":25,"value":2312},"  \n",{"type":19,"tag":147,"props":2314,"children":2315},{"class":149,"line":286},[2316,2321],{"type":19,"tag":147,"props":2317,"children":2318},{"style":592},[2319],{"type":25,"value":2320},"  td",{"type":19,"tag":147,"props":2322,"children":2323},{"style":170},[2324],{"type":25,"value":996},{"type":19,"tag":147,"props":2326,"children":2327},{"class":149,"line":294},[2328,2333,2337,2342],{"type":19,"tag":147,"props":2329,"children":2330},{"style":176},[2331],{"type":25,"value":2332},"    border",{"type":19,"tag":147,"props":2334,"children":2335},{"style":170},[2336],{"type":25,"value":184},{"type":19,"tag":147,"props":2338,"children":2339},{"style":176},[2340],{"type":25,"value":2341},"none",{"type":19,"tag":147,"props":2343,"children":2344},{"style":170},[2345],{"type":25,"value":1023},{"type":19,"tag":147,"props":2347,"children":2348},{"class":149,"line":303},[2349,2354,2358,2363],{"type":19,"tag":147,"props":2350,"children":2351},{"style":176},[2352],{"type":25,"value":2353},"    position",{"type":19,"tag":147,"props":2355,"children":2356},{"style":170},[2357],{"type":25,"value":184},{"type":19,"tag":147,"props":2359,"children":2360},{"style":176},[2361],{"type":25,"value":2362},"relative",{"type":19,"tag":147,"props":2364,"children":2365},{"style":170},[2366],{"type":25,"value":1023},{"type":19,"tag":147,"props":2368,"children":2369},{"class":149,"line":336},[2370,2375,2379,2384,2388],{"type":19,"tag":147,"props":2371,"children":2372},{"style":176},[2373],{"type":25,"value":2374},"    padding-left",{"type":19,"tag":147,"props":2376,"children":2377},{"style":170},[2378],{"type":25,"value":184},{"type":19,"tag":147,"props":2380,"children":2381},{"style":176},[2382],{"type":25,"value":2383},"50",{"type":19,"tag":147,"props":2385,"children":2386},{"style":164},[2387],{"type":25,"value":1018},{"type":19,"tag":147,"props":2389,"children":2390},{"style":170},[2391],{"type":25,"value":1023},{"type":19,"tag":147,"props":2393,"children":2394},{"class":149,"line":344},[2395],{"type":19,"tag":147,"props":2396,"children":2397},{"style":170},[2398],{"type":25,"value":2304},{"type":19,"tag":147,"props":2400,"children":2401},{"class":149,"line":353},[2402],{"type":19,"tag":147,"props":2403,"children":2404},{"style":170},[2405],{"type":25,"value":2312},{"type":19,"tag":147,"props":2407,"children":2408},{"class":149,"line":2003},[2409,2413,2418],{"type":19,"tag":147,"props":2410,"children":2411},{"style":592},[2412],{"type":25,"value":2320},{"type":19,"tag":147,"props":2414,"children":2415},{"style":598},[2416],{"type":25,"value":2417},":before",{"type":19,"tag":147,"props":2419,"children":2420},{"style":170},[2421],{"type":25,"value":996},{"type":19,"tag":147,"props":2423,"children":2425},{"class":149,"line":2424},13,[2426,2431,2435,2440,2444,2450],{"type":19,"tag":147,"props":2427,"children":2428},{"style":176},[2429],{"type":25,"value":2430},"    content",{"type":19,"tag":147,"props":2432,"children":2433},{"style":170},[2434],{"type":25,"value":184},{"type":19,"tag":147,"props":2436,"children":2437},{"style":176},[2438],{"type":25,"value":2439},"attr",{"type":19,"tag":147,"props":2441,"children":2442},{"style":170},[2443],{"type":25,"value":1376},{"type":19,"tag":147,"props":2445,"children":2447},{"style":2446},"--shiki-default:#FFAB70;--shiki-dark:#FFAB70",[2448],{"type":25,"value":2449},"data-label",{"type":19,"tag":147,"props":2451,"children":2452},{"style":170},[2453],{"type":25,"value":2454},");\n",{"type":19,"tag":147,"props":2456,"children":2458},{"class":149,"line":2457},14,[2459,2463,2467,2472],{"type":19,"tag":147,"props":2460,"children":2461},{"style":176},[2462],{"type":25,"value":2353},{"type":19,"tag":147,"props":2464,"children":2465},{"style":170},[2466],{"type":25,"value":184},{"type":19,"tag":147,"props":2468,"children":2469},{"style":176},[2470],{"type":25,"value":2471},"absolute",{"type":19,"tag":147,"props":2473,"children":2474},{"style":170},[2475],{"type":25,"value":1023},{"type":19,"tag":147,"props":2477,"children":2479},{"class":149,"line":2478},15,[2480,2485,2489,2494,2498],{"type":19,"tag":147,"props":2481,"children":2482},{"style":176},[2483],{"type":25,"value":2484},"    left",{"type":19,"tag":147,"props":2486,"children":2487},{"style":170},[2488],{"type":25,"value":184},{"type":19,"tag":147,"props":2490,"children":2491},{"style":176},[2492],{"type":25,"value":2493},"6",{"type":19,"tag":147,"props":2495,"children":2496},{"style":164},[2497],{"type":25,"value":194},{"type":19,"tag":147,"props":2499,"children":2500},{"style":170},[2501],{"type":25,"value":1023},{"type":19,"tag":147,"props":2503,"children":2505},{"class":149,"line":2504},16,[2506,2511,2515,2520,2524],{"type":19,"tag":147,"props":2507,"children":2508},{"style":176},[2509],{"type":25,"value":2510},"    width",{"type":19,"tag":147,"props":2512,"children":2513},{"style":170},[2514],{"type":25,"value":184},{"type":19,"tag":147,"props":2516,"children":2517},{"style":176},[2518],{"type":25,"value":2519},"45",{"type":19,"tag":147,"props":2521,"children":2522},{"style":164},[2523],{"type":25,"value":1018},{"type":19,"tag":147,"props":2525,"children":2526},{"style":170},[2527],{"type":25,"value":1023},{"type":19,"tag":147,"props":2529,"children":2531},{"class":149,"line":2530},17,[2532,2537,2541,2546],{"type":19,"tag":147,"props":2533,"children":2534},{"style":176},[2535],{"type":25,"value":2536},"    font-weight",{"type":19,"tag":147,"props":2538,"children":2539},{"style":170},[2540],{"type":25,"value":184},{"type":19,"tag":147,"props":2542,"children":2543},{"style":176},[2544],{"type":25,"value":2545},"bold",{"type":19,"tag":147,"props":2547,"children":2548},{"style":170},[2549],{"type":25,"value":1023},{"type":19,"tag":147,"props":2551,"children":2553},{"class":149,"line":2552},18,[2554],{"type":19,"tag":147,"props":2555,"children":2556},{"style":170},[2557],{"type":25,"value":2304},{"type":19,"tag":147,"props":2559,"children":2561},{"class":149,"line":2560},19,[2562],{"type":19,"tag":147,"props":2563,"children":2564},{"style":170},[2565],{"type":25,"value":1082},{"type":19,"tag":40,"props":2567,"children":2569},{"id":2568},"️-导航菜单响应式",[2570],{"type":25,"value":2571},"🎛️ 导航菜单响应式",{"type":19,"tag":28,"props":2573,"children":2574},{},[2575],{"type":25,"value":2576},"移动端导航的最佳实践：",{"type":19,"tag":28,"props":2578,"children":2579},{},[2580],{"type":19,"tag":55,"props":2581,"children":2582},{},[2583],{"type":25,"value":2584},"汉堡菜单模式：",{"type":19,"tag":136,"props":2586,"children":2588},{"className":567,"code":2587,"language":569,"meta":7,"style":7},"\u003C!-- 移动端汉堡菜单 -->\n\u003Cnav class=\"navbar\">\n  \u003Cdiv class=\"nav-brand\">Logo\u003C/div>\n  \u003Cbutton class=\"nav-toggle md:hidden\">☰\u003C/button>\n  \u003Cdiv class=\"nav-menu md:block\">\n    \u003Ca href=\"#\" class=\"nav-link\">首页\u003C/a>\n    \u003Ca href=\"#\" class=\"nav-link\">产品\u003C/a>\n    \u003Ca href=\"#\" class=\"nav-link\">联系\u003C/a>\n  \u003C/div>\n\u003C/nav>\n",[2589],{"type":19,"tag":143,"props":2590,"children":2591},{"__ignoreMap":7},[2592,2600,2629,2666,2704,2732,2785,2833,2881,2897],{"type":19,"tag":147,"props":2593,"children":2594},{"class":149,"line":150},[2595],{"type":19,"tag":147,"props":2596,"children":2597},{"style":154},[2598],{"type":25,"value":2599},"\u003C!-- 移动端汉堡菜单 -->\n",{"type":19,"tag":147,"props":2601,"children":2602},{"class":149,"line":160},[2603,2607,2612,2616,2620,2625],{"type":19,"tag":147,"props":2604,"children":2605},{"style":170},[2606],{"type":25,"value":589},{"type":19,"tag":147,"props":2608,"children":2609},{"style":592},[2610],{"type":25,"value":2611},"nav",{"type":19,"tag":147,"props":2613,"children":2614},{"style":598},[2615],{"type":25,"value":601},{"type":19,"tag":147,"props":2617,"children":2618},{"style":170},[2619],{"type":25,"value":606},{"type":19,"tag":147,"props":2621,"children":2622},{"style":609},[2623],{"type":25,"value":2624},"\"navbar\"",{"type":19,"tag":147,"props":2626,"children":2627},{"style":170},[2628],{"type":25,"value":617},{"type":19,"tag":147,"props":2630,"children":2631},{"class":149,"line":202},[2632,2636,2640,2644,2648,2653,2658,2662],{"type":19,"tag":147,"props":2633,"children":2634},{"style":170},[2635],{"type":25,"value":625},{"type":19,"tag":147,"props":2637,"children":2638},{"style":592},[2639],{"type":25,"value":595},{"type":19,"tag":147,"props":2641,"children":2642},{"style":598},[2643],{"type":25,"value":601},{"type":19,"tag":147,"props":2645,"children":2646},{"style":170},[2647],{"type":25,"value":606},{"type":19,"tag":147,"props":2649,"children":2650},{"style":609},[2651],{"type":25,"value":2652},"\"nav-brand\"",{"type":19,"tag":147,"props":2654,"children":2655},{"style":170},[2656],{"type":25,"value":2657},">Logo\u003C/",{"type":19,"tag":147,"props":2659,"children":2660},{"style":592},[2661],{"type":25,"value":595},{"type":19,"tag":147,"props":2663,"children":2664},{"style":170},[2665],{"type":25,"value":617},{"type":19,"tag":147,"props":2667,"children":2668},{"class":149,"line":212},[2669,2673,2678,2682,2686,2691,2696,2700],{"type":19,"tag":147,"props":2670,"children":2671},{"style":170},[2672],{"type":25,"value":625},{"type":19,"tag":147,"props":2674,"children":2675},{"style":592},[2676],{"type":25,"value":2677},"button",{"type":19,"tag":147,"props":2679,"children":2680},{"style":598},[2681],{"type":25,"value":601},{"type":19,"tag":147,"props":2683,"children":2684},{"style":170},[2685],{"type":25,"value":606},{"type":19,"tag":147,"props":2687,"children":2688},{"style":609},[2689],{"type":25,"value":2690},"\"nav-toggle md:hidden\"",{"type":19,"tag":147,"props":2692,"children":2693},{"style":170},[2694],{"type":25,"value":2695},">☰\u003C/",{"type":19,"tag":147,"props":2697,"children":2698},{"style":592},[2699],{"type":25,"value":2677},{"type":19,"tag":147,"props":2701,"children":2702},{"style":170},[2703],{"type":25,"value":617},{"type":19,"tag":147,"props":2705,"children":2706},{"class":149,"line":221},[2707,2711,2715,2719,2723,2728],{"type":19,"tag":147,"props":2708,"children":2709},{"style":170},[2710],{"type":25,"value":625},{"type":19,"tag":147,"props":2712,"children":2713},{"style":592},[2714],{"type":25,"value":595},{"type":19,"tag":147,"props":2716,"children":2717},{"style":598},[2718],{"type":25,"value":601},{"type":19,"tag":147,"props":2720,"children":2721},{"style":170},[2722],{"type":25,"value":606},{"type":19,"tag":147,"props":2724,"children":2725},{"style":609},[2726],{"type":25,"value":2727},"\"nav-menu md:block\"",{"type":19,"tag":147,"props":2729,"children":2730},{"style":170},[2731],{"type":25,"value":617},{"type":19,"tag":147,"props":2733,"children":2734},{"class":149,"line":286},[2735,2740,2745,2750,2754,2759,2763,2767,2772,2777,2781],{"type":19,"tag":147,"props":2736,"children":2737},{"style":170},[2738],{"type":25,"value":2739},"    \u003C",{"type":19,"tag":147,"props":2741,"children":2742},{"style":592},[2743],{"type":25,"value":2744},"a",{"type":19,"tag":147,"props":2746,"children":2747},{"style":598},[2748],{"type":25,"value":2749}," href",{"type":19,"tag":147,"props":2751,"children":2752},{"style":170},[2753],{"type":25,"value":606},{"type":19,"tag":147,"props":2755,"children":2756},{"style":609},[2757],{"type":25,"value":2758},"\"#\"",{"type":19,"tag":147,"props":2760,"children":2761},{"style":598},[2762],{"type":25,"value":601},{"type":19,"tag":147,"props":2764,"children":2765},{"style":170},[2766],{"type":25,"value":606},{"type":19,"tag":147,"props":2768,"children":2769},{"style":609},[2770],{"type":25,"value":2771},"\"nav-link\"",{"type":19,"tag":147,"props":2773,"children":2774},{"style":170},[2775],{"type":25,"value":2776},">首页\u003C/",{"type":19,"tag":147,"props":2778,"children":2779},{"style":592},[2780],{"type":25,"value":2744},{"type":19,"tag":147,"props":2782,"children":2783},{"style":170},[2784],{"type":25,"value":617},{"type":19,"tag":147,"props":2786,"children":2787},{"class":149,"line":294},[2788,2792,2796,2800,2804,2808,2812,2816,2820,2825,2829],{"type":19,"tag":147,"props":2789,"children":2790},{"style":170},[2791],{"type":25,"value":2739},{"type":19,"tag":147,"props":2793,"children":2794},{"style":592},[2795],{"type":25,"value":2744},{"type":19,"tag":147,"props":2797,"children":2798},{"style":598},[2799],{"type":25,"value":2749},{"type":19,"tag":147,"props":2801,"children":2802},{"style":170},[2803],{"type":25,"value":606},{"type":19,"tag":147,"props":2805,"children":2806},{"style":609},[2807],{"type":25,"value":2758},{"type":19,"tag":147,"props":2809,"children":2810},{"style":598},[2811],{"type":25,"value":601},{"type":19,"tag":147,"props":2813,"children":2814},{"style":170},[2815],{"type":25,"value":606},{"type":19,"tag":147,"props":2817,"children":2818},{"style":609},[2819],{"type":25,"value":2771},{"type":19,"tag":147,"props":2821,"children":2822},{"style":170},[2823],{"type":25,"value":2824},">产品\u003C/",{"type":19,"tag":147,"props":2826,"children":2827},{"style":592},[2828],{"type":25,"value":2744},{"type":19,"tag":147,"props":2830,"children":2831},{"style":170},[2832],{"type":25,"value":617},{"type":19,"tag":147,"props":2834,"children":2835},{"class":149,"line":303},[2836,2840,2844,2848,2852,2856,2860,2864,2868,2873,2877],{"type":19,"tag":147,"props":2837,"children":2838},{"style":170},[2839],{"type":25,"value":2739},{"type":19,"tag":147,"props":2841,"children":2842},{"style":592},[2843],{"type":25,"value":2744},{"type":19,"tag":147,"props":2845,"children":2846},{"style":598},[2847],{"type":25,"value":2749},{"type":19,"tag":147,"props":2849,"children":2850},{"style":170},[2851],{"type":25,"value":606},{"type":19,"tag":147,"props":2853,"children":2854},{"style":609},[2855],{"type":25,"value":2758},{"type":19,"tag":147,"props":2857,"children":2858},{"style":598},[2859],{"type":25,"value":601},{"type":19,"tag":147,"props":2861,"children":2862},{"style":170},[2863],{"type":25,"value":606},{"type":19,"tag":147,"props":2865,"children":2866},{"style":609},[2867],{"type":25,"value":2771},{"type":19,"tag":147,"props":2869,"children":2870},{"style":170},[2871],{"type":25,"value":2872},">联系\u003C/",{"type":19,"tag":147,"props":2874,"children":2875},{"style":592},[2876],{"type":25,"value":2744},{"type":19,"tag":147,"props":2878,"children":2879},{"style":170},[2880],{"type":25,"value":617},{"type":19,"tag":147,"props":2882,"children":2883},{"class":149,"line":336},[2884,2889,2893],{"type":19,"tag":147,"props":2885,"children":2886},{"style":170},[2887],{"type":25,"value":2888},"  \u003C/",{"type":19,"tag":147,"props":2890,"children":2891},{"style":592},[2892],{"type":25,"value":595},{"type":19,"tag":147,"props":2894,"children":2895},{"style":170},[2896],{"type":25,"value":617},{"type":19,"tag":147,"props":2898,"children":2899},{"class":149,"line":344},[2900,2904,2908],{"type":19,"tag":147,"props":2901,"children":2902},{"style":170},[2903],{"type":25,"value":735},{"type":19,"tag":147,"props":2905,"children":2906},{"style":592},[2907],{"type":25,"value":2611},{"type":19,"tag":147,"props":2909,"children":2910},{"style":170},[2911],{"type":25,"value":617},{"type":19,"tag":28,"props":2913,"children":2914},{},[2915,2920],{"type":19,"tag":55,"props":2916,"children":2917},{},[2918],{"type":25,"value":2919},"底部标签栏：",{"type":25,"value":2921},"\n适合移动应用式的导航体验。",{"type":19,"tag":40,"props":2923,"children":2925},{"id":2924},"️-媒体内容适配",[2926],{"type":25,"value":2927},"🖼️ 媒体内容适配",{"type":19,"tag":28,"props":2929,"children":2930},{},[2931],{"type":25,"value":2932},"视频、图片等媒体内容的响应式处理：",{"type":19,"tag":28,"props":2934,"children":2935},{},[2936],{"type":19,"tag":55,"props":2937,"children":2938},{},[2939],{"type":25,"value":2940},"响应式视频：",{"type":19,"tag":136,"props":2942,"children":2944},{"className":138,"code":2943,"language":140,"meta":7,"style":7},".video-container {\n  position: relative;\n  padding-bottom: 56.25%; /* 16:9 宽高比 */\n  height: 0;\n  overflow: hidden;\n}\n\n.video-container iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n",[2945],{"type":19,"tag":143,"props":2946,"children":2947},{"__ignoreMap":7},[2948,2960,2980,3010,3030,3051,3058,3065,3081,3100,3120,3140,3164,3187],{"type":19,"tag":147,"props":2949,"children":2950},{"class":149,"line":150},[2951,2956],{"type":19,"tag":147,"props":2952,"children":2953},{"style":598},[2954],{"type":25,"value":2955},".video-container",{"type":19,"tag":147,"props":2957,"children":2958},{"style":170},[2959],{"type":25,"value":996},{"type":19,"tag":147,"props":2961,"children":2962},{"class":149,"line":160},[2963,2968,2972,2976],{"type":19,"tag":147,"props":2964,"children":2965},{"style":176},[2966],{"type":25,"value":2967},"  position",{"type":19,"tag":147,"props":2969,"children":2970},{"style":170},[2971],{"type":25,"value":184},{"type":19,"tag":147,"props":2973,"children":2974},{"style":176},[2975],{"type":25,"value":2362},{"type":19,"tag":147,"props":2977,"children":2978},{"style":170},[2979],{"type":25,"value":1023},{"type":19,"tag":147,"props":2981,"children":2982},{"class":149,"line":202},[2983,2988,2992,2997,3001,3005],{"type":19,"tag":147,"props":2984,"children":2985},{"style":176},[2986],{"type":25,"value":2987},"  padding-bottom",{"type":19,"tag":147,"props":2989,"children":2990},{"style":170},[2991],{"type":25,"value":184},{"type":19,"tag":147,"props":2993,"children":2994},{"style":176},[2995],{"type":25,"value":2996},"56.25",{"type":19,"tag":147,"props":2998,"children":2999},{"style":164},[3000],{"type":25,"value":1018},{"type":19,"tag":147,"props":3002,"children":3003},{"style":170},[3004],{"type":25,"value":1253},{"type":19,"tag":147,"props":3006,"children":3007},{"style":154},[3008],{"type":25,"value":3009},"/* 16:9 宽高比 */\n",{"type":19,"tag":147,"props":3011,"children":3012},{"class":149,"line":212},[3013,3018,3022,3026],{"type":19,"tag":147,"props":3014,"children":3015},{"style":176},[3016],{"type":25,"value":3017},"  height",{"type":19,"tag":147,"props":3019,"children":3020},{"style":170},[3021],{"type":25,"value":184},{"type":19,"tag":147,"props":3023,"children":3024},{"style":176},[3025],{"type":25,"value":1065},{"type":19,"tag":147,"props":3027,"children":3028},{"style":170},[3029],{"type":25,"value":1023},{"type":19,"tag":147,"props":3031,"children":3032},{"class":149,"line":221},[3033,3038,3042,3047],{"type":19,"tag":147,"props":3034,"children":3035},{"style":176},[3036],{"type":25,"value":3037},"  overflow",{"type":19,"tag":147,"props":3039,"children":3040},{"style":170},[3041],{"type":25,"value":184},{"type":19,"tag":147,"props":3043,"children":3044},{"style":176},[3045],{"type":25,"value":3046},"hidden",{"type":19,"tag":147,"props":3048,"children":3049},{"style":170},[3050],{"type":25,"value":1023},{"type":19,"tag":147,"props":3052,"children":3053},{"class":149,"line":286},[3054],{"type":19,"tag":147,"props":3055,"children":3056},{"style":170},[3057],{"type":25,"value":1082},{"type":19,"tag":147,"props":3059,"children":3060},{"class":149,"line":294},[3061],{"type":19,"tag":147,"props":3062,"children":3063},{"emptyLinePlaceholder":206},[3064],{"type":25,"value":209},{"type":19,"tag":147,"props":3066,"children":3067},{"class":149,"line":303},[3068,3072,3077],{"type":19,"tag":147,"props":3069,"children":3070},{"style":598},[3071],{"type":25,"value":2955},{"type":19,"tag":147,"props":3073,"children":3074},{"style":592},[3075],{"type":25,"value":3076}," iframe",{"type":19,"tag":147,"props":3078,"children":3079},{"style":170},[3080],{"type":25,"value":996},{"type":19,"tag":147,"props":3082,"children":3083},{"class":149,"line":336},[3084,3088,3092,3096],{"type":19,"tag":147,"props":3085,"children":3086},{"style":176},[3087],{"type":25,"value":2967},{"type":19,"tag":147,"props":3089,"children":3090},{"style":170},[3091],{"type":25,"value":184},{"type":19,"tag":147,"props":3093,"children":3094},{"style":176},[3095],{"type":25,"value":2471},{"type":19,"tag":147,"props":3097,"children":3098},{"style":170},[3099],{"type":25,"value":1023},{"type":19,"tag":147,"props":3101,"children":3102},{"class":149,"line":344},[3103,3108,3112,3116],{"type":19,"tag":147,"props":3104,"children":3105},{"style":176},[3106],{"type":25,"value":3107},"  top",{"type":19,"tag":147,"props":3109,"children":3110},{"style":170},[3111],{"type":25,"value":184},{"type":19,"tag":147,"props":3113,"children":3114},{"style":176},[3115],{"type":25,"value":1065},{"type":19,"tag":147,"props":3117,"children":3118},{"style":170},[3119],{"type":25,"value":1023},{"type":19,"tag":147,"props":3121,"children":3122},{"class":149,"line":353},[3123,3128,3132,3136],{"type":19,"tag":147,"props":3124,"children":3125},{"style":176},[3126],{"type":25,"value":3127},"  left",{"type":19,"tag":147,"props":3129,"children":3130},{"style":170},[3131],{"type":25,"value":184},{"type":19,"tag":147,"props":3133,"children":3134},{"style":176},[3135],{"type":25,"value":1065},{"type":19,"tag":147,"props":3137,"children":3138},{"style":170},[3139],{"type":25,"value":1023},{"type":19,"tag":147,"props":3141,"children":3142},{"class":149,"line":2003},[3143,3147,3151,3156,3160],{"type":19,"tag":147,"props":3144,"children":3145},{"style":176},[3146],{"type":25,"value":1004},{"type":19,"tag":147,"props":3148,"children":3149},{"style":170},[3150],{"type":25,"value":184},{"type":19,"tag":147,"props":3152,"children":3153},{"style":176},[3154],{"type":25,"value":3155},"100",{"type":19,"tag":147,"props":3157,"children":3158},{"style":164},[3159],{"type":25,"value":1018},{"type":19,"tag":147,"props":3161,"children":3162},{"style":170},[3163],{"type":25,"value":1023},{"type":19,"tag":147,"props":3165,"children":3166},{"class":149,"line":2424},[3167,3171,3175,3179,3183],{"type":19,"tag":147,"props":3168,"children":3169},{"style":176},[3170],{"type":25,"value":3017},{"type":19,"tag":147,"props":3172,"children":3173},{"style":170},[3174],{"type":25,"value":184},{"type":19,"tag":147,"props":3176,"children":3177},{"style":176},[3178],{"type":25,"value":3155},{"type":19,"tag":147,"props":3180,"children":3181},{"style":164},[3182],{"type":25,"value":1018},{"type":19,"tag":147,"props":3184,"children":3185},{"style":170},[3186],{"type":25,"value":1023},{"type":19,"tag":147,"props":3188,"children":3189},{"class":149,"line":2457},[3190],{"type":19,"tag":147,"props":3191,"children":3192},{"style":170},[3193],{"type":25,"value":1082},{"type":19,"tag":34,"props":3195,"children":3197},{"id":3196},"测试和调试",[3198],{"type":25,"value":3196},{"type":19,"tag":40,"props":3200,"children":3202},{"id":3201},"设备测试策略",[3203],{"type":25,"value":3204},"🔍 设备测试策略",{"type":19,"tag":28,"props":3206,"children":3207},{},[3208],{"type":25,"value":3209},"确保在真实设备上的完美表现：",{"type":19,"tag":28,"props":3211,"children":3212},{},[3213],{"type":19,"tag":55,"props":3214,"children":3215},{},[3216],{"type":25,"value":3217},"测试设备清单：",{"type":19,"tag":61,"props":3219,"children":3220},{},[3221,3231,3241,3251],{"type":19,"tag":65,"props":3222,"children":3223},{},[3224,3229],{"type":19,"tag":55,"props":3225,"children":3226},{},[3227],{"type":25,"value":3228},"手机",{"type":25,"value":3230},"：iPhone 12/13、三星Galaxy、小米",{"type":19,"tag":65,"props":3232,"children":3233},{},[3234,3239],{"type":19,"tag":55,"props":3235,"children":3236},{},[3237],{"type":25,"value":3238},"平板",{"type":25,"value":3240},"：iPad、Android平板",{"type":19,"tag":65,"props":3242,"children":3243},{},[3244,3249],{"type":19,"tag":55,"props":3245,"children":3246},{},[3247],{"type":25,"value":3248},"桌面",{"type":25,"value":3250},"：不同分辨率的显示器",{"type":19,"tag":65,"props":3252,"children":3253},{},[3254,3259],{"type":19,"tag":55,"props":3255,"children":3256},{},[3257],{"type":25,"value":3258},"浏览器",{"type":25,"value":3260},"：Chrome、Safari、Firefox、Edge",{"type":19,"tag":28,"props":3262,"children":3263},{},[3264],{"type":19,"tag":55,"props":3265,"children":3266},{},[3267],{"type":25,"value":3268},"模拟工具：",{"type":19,"tag":61,"props":3270,"children":3271},{},[3272,3277,3282,3287],{"type":19,"tag":65,"props":3273,"children":3274},{},[3275],{"type":25,"value":3276},"Chrome DevTools设备模拟",{"type":19,"tag":65,"props":3278,"children":3279},{},[3280],{"type":25,"value":3281},"Firefox响应式设计模式",{"type":19,"tag":65,"props":3283,"children":3284},{},[3285],{"type":25,"value":3286},"BrowserStack在线测试",{"type":19,"tag":65,"props":3288,"children":3289},{},[3290],{"type":25,"value":3291},"本地设备测试网络",{"type":19,"tag":40,"props":3293,"children":3295},{"id":3294},"️-调试技巧",[3296],{"type":25,"value":3297},"🛠️ 调试技巧",{"type":19,"tag":28,"props":3299,"children":3300},{},[3301],{"type":25,"value":3302},"快速定位和解决响应式问题：",{"type":19,"tag":28,"props":3304,"children":3305},{},[3306],{"type":19,"tag":55,"props":3307,"children":3308},{},[3309],{"type":25,"value":3310},"Chrome DevTools技巧：",{"type":19,"tag":492,"props":3312,"children":3313},{},[3314,3319,3324,3329],{"type":19,"tag":65,"props":3315,"children":3316},{},[3317],{"type":25,"value":3318},"使用响应式模式快速切换设备",{"type":19,"tag":65,"props":3320,"children":3321},{},[3322],{"type":25,"value":3323},"网络节流测试不同网速",{"type":19,"tag":65,"props":3325,"children":3326},{},[3327],{"type":25,"value":3328},"检查触控事件和手势",{"type":19,"tag":65,"props":3330,"children":3331},{},[3332],{"type":25,"value":3333},"分析渲染性能和内存使用",{"type":19,"tag":28,"props":3335,"children":3336},{},[3337],{"type":19,"tag":55,"props":3338,"children":3339},{},[3340],{"type":25,"value":3341},"常见问题排查：",{"type":19,"tag":61,"props":3343,"children":3344},{},[3345,3355,3365,3375],{"type":19,"tag":65,"props":3346,"children":3347},{},[3348,3353],{"type":19,"tag":55,"props":3349,"children":3350},{},[3351],{"type":25,"value":3352},"布局破坏",{"type":25,"value":3354},"：检查固定宽度和溢出",{"type":19,"tag":65,"props":3356,"children":3357},{},[3358,3363],{"type":19,"tag":55,"props":3359,"children":3360},{},[3361],{"type":25,"value":3362},"字体太小",{"type":25,"value":3364},"：确认最小字体设置",{"type":19,"tag":65,"props":3366,"children":3367},{},[3368,3373],{"type":19,"tag":55,"props":3369,"children":3370},{},[3371],{"type":25,"value":3372},"按钮难点击",{"type":25,"value":3374},"：检查触控区域大小",{"type":19,"tag":65,"props":3376,"children":3377},{},[3378,3383],{"type":19,"tag":55,"props":3379,"children":3380},{},[3381],{"type":25,"value":3382},"加载缓慢",{"type":25,"value":3384},"：优化图片和资源加载",{"type":19,"tag":34,"props":3386,"children":3388},{"id":3387},"响应式设计最佳实践",[3389],{"type":25,"value":3387},{"type":19,"tag":40,"props":3391,"children":3393},{"id":3392},"设计原则",[3394],{"type":25,"value":3395},"✅ 设计原则",{"type":19,"tag":28,"props":3397,"children":3398},{},[3399],{"type":25,"value":3400},"遵循这些原则打造优秀的响应式体验：",{"type":19,"tag":492,"props":3402,"children":3403},{},[3404,3414,3424,3434,3444],{"type":19,"tag":65,"props":3405,"children":3406},{},[3407,3412],{"type":19,"tag":55,"props":3408,"children":3409},{},[3410],{"type":25,"value":3411},"内容优先",{"type":25,"value":3413},"：确保核心内容在所有设备上清晰呈现",{"type":19,"tag":65,"props":3415,"children":3416},{},[3417,3422],{"type":19,"tag":55,"props":3418,"children":3419},{},[3420],{"type":25,"value":3421},"渐进增强",{"type":25,"value":3423},"：从基础功能逐步添加高级特性",{"type":19,"tag":65,"props":3425,"children":3426},{},[3427,3432],{"type":19,"tag":55,"props":3428,"children":3429},{},[3430],{"type":25,"value":3431},"性能考虑",{"type":25,"value":3433},"：平衡视觉效果和加载速度",{"type":19,"tag":65,"props":3435,"children":3436},{},[3437,3442],{"type":19,"tag":55,"props":3438,"children":3439},{},[3440],{"type":25,"value":3441},"一致体验",{"type":25,"value":3443},"：保持品牌和交互的一致性",{"type":19,"tag":65,"props":3445,"children":3446},{},[3447,3452],{"type":19,"tag":55,"props":3448,"children":3449},{},[3450],{"type":25,"value":3451},"用户测试",{"type":25,"value":3453},"：基于真实用户反馈持续优化",{"type":19,"tag":40,"props":3455,"children":3457},{"id":3456},"开发检查清单",[3458],{"type":25,"value":3459},"📋 开发检查清单",{"type":19,"tag":28,"props":3461,"children":3462},{},[3463],{"type":25,"value":3464},"确保每个响应式项目的质量：",{"type":19,"tag":61,"props":3466,"children":3469},{"className":3467},[3468],"contains-task-list",[3470,3482,3491,3500,3509,3518,3527,3536],{"type":19,"tag":65,"props":3471,"children":3474},{"className":3472},[3473],"task-list-item",[3475,3480],{"type":19,"tag":3476,"props":3477,"children":3479},"input",{"disabled":206,"type":3478},"checkbox",[],{"type":25,"value":3481}," 移动端首屏内容3秒内加载完成",{"type":19,"tag":65,"props":3483,"children":3485},{"className":3484},[3473],[3486,3489],{"type":19,"tag":3476,"props":3487,"children":3488},{"disabled":206,"type":3478},[],{"type":25,"value":3490}," 所有交互元素至少44px点击区域",{"type":19,"tag":65,"props":3492,"children":3494},{"className":3493},[3473],[3495,3498],{"type":19,"tag":3476,"props":3496,"children":3497},{"disabled":206,"type":3478},[],{"type":25,"value":3499}," 文字在所有设备上清晰可读",{"type":19,"tag":65,"props":3501,"children":3503},{"className":3502},[3473],[3504,3507],{"type":19,"tag":3476,"props":3505,"children":3506},{"disabled":206,"type":3478},[],{"type":25,"value":3508}," 图片和视频自适应屏幕尺寸",{"type":19,"tag":65,"props":3510,"children":3512},{"className":3511},[3473],[3513,3516],{"type":19,"tag":3476,"props":3514,"children":3515},{"disabled":206,"type":3478},[],{"type":25,"value":3517}," 表单在移动端易于填写",{"type":19,"tag":65,"props":3519,"children":3521},{"className":3520},[3473],[3522,3525],{"type":19,"tag":3476,"props":3523,"children":3524},{"disabled":206,"type":3478},[],{"type":25,"value":3526}," 导航在小屏幕上便于操作",{"type":19,"tag":65,"props":3528,"children":3530},{"className":3529},[3473],[3531,3534],{"type":19,"tag":3476,"props":3532,"children":3533},{"disabled":206,"type":3478},[],{"type":25,"value":3535}," 页面在横竖屏切换时正常显示",{"type":19,"tag":65,"props":3537,"children":3539},{"className":3538},[3473],[3540,3543],{"type":19,"tag":3476,"props":3541,"children":3542},{"disabled":206,"type":3478},[],{"type":25,"value":3544}," 所有功能在触屏设备上可用",{"type":19,"tag":34,"props":3546,"children":3548},{"id":3547},"未来趋势",[3549],{"type":25,"value":3547},{"type":19,"tag":40,"props":3551,"children":3553},{"id":3552},"新兴技术",[3554],{"type":25,"value":3555},"🔮 新兴技术",{"type":19,"tag":28,"props":3557,"children":3558},{},[3559],{"type":25,"value":3560},"关注这些影响响应式设计的新技术：",{"type":19,"tag":28,"props":3562,"children":3563},{},[3564,3569],{"type":19,"tag":55,"props":3565,"children":3566},{},[3567],{"type":25,"value":3568},"CSS容器查询（Container Queries）：",{"type":25,"value":3570},"\n根据容器尺寸而非视窗尺寸调整样式。",{"type":19,"tag":28,"props":3572,"children":3573},{},[3574,3579],{"type":19,"tag":55,"props":3575,"children":3576},{},[3577],{"type":25,"value":3578},"可变字体（Variable Fonts）：",{"type":25,"value":3580},"\n更灵活的字体适配和性能优化。",{"type":19,"tag":28,"props":3582,"children":3583},{},[3584,3589],{"type":19,"tag":55,"props":3585,"children":3586},{},[3587],{"type":25,"value":3588},"CSS子网格（Subgrid）：",{"type":25,"value":3590},"\n更复杂的嵌套网格布局能力。",{"type":19,"tag":28,"props":3592,"children":3593},{},[3594,3599],{"type":19,"tag":55,"props":3595,"children":3596},{},[3597],{"type":25,"value":3598},"Web组件（Web Components）：",{"type":25,"value":3600},"\n可复用的响应式组件系统。",{"type":19,"tag":40,"props":3602,"children":3604},{"id":3603},"设计趋势",[3605],{"type":25,"value":3606},"📈 设计趋势",{"type":19,"tag":28,"props":3608,"children":3609},{},[3610],{"type":25,"value":3611},"保持对设计趋势的敏感度：",{"type":19,"tag":61,"props":3613,"children":3614},{},[3615,3625,3635,3645,3655],{"type":19,"tag":65,"props":3616,"children":3617},{},[3618,3623],{"type":19,"tag":55,"props":3619,"children":3620},{},[3621],{"type":25,"value":3622},"极简主义",{"type":25,"value":3624},"：更简洁的界面和交互",{"type":19,"tag":65,"props":3626,"children":3627},{},[3628,3633],{"type":19,"tag":55,"props":3629,"children":3630},{},[3631],{"type":25,"value":3632},"深色模式",{"type":25,"value":3634},"：系统级主题适配",{"type":19,"tag":65,"props":3636,"children":3637},{},[3638,3643],{"type":19,"tag":55,"props":3639,"children":3640},{},[3641],{"type":25,"value":3642},"微交互",{"type":25,"value":3644},"：细致的动画和反馈",{"type":19,"tag":65,"props":3646,"children":3647},{},[3648,3653],{"type":19,"tag":55,"props":3649,"children":3650},{},[3651],{"type":25,"value":3652},"无障碍设计",{"type":25,"value":3654},"：包容性设计理念",{"type":19,"tag":65,"props":3656,"children":3657},{},[3658,3663],{"type":19,"tag":55,"props":3659,"children":3660},{},[3661],{"type":25,"value":3662},"语音界面",{"type":25,"value":3664},"：语音交互的整合",{"type":19,"tag":34,"props":3666,"children":3668},{"id":3667},"工具和资源",[3669],{"type":25,"value":3667},{"type":19,"tag":40,"props":3671,"children":3673},{"id":3672},"️-推荐工具",[3674],{"type":25,"value":3675},"🛠️ 推荐工具",{"type":19,"tag":28,"props":3677,"children":3678},{},[3679],{"type":25,"value":3680},"提升响应式设计效率的工具：",{"type":19,"tag":28,"props":3682,"children":3683},{},[3684],{"type":19,"tag":55,"props":3685,"children":3686},{},[3687],{"type":25,"value":3688},"设计工具：",{"type":19,"tag":61,"props":3690,"children":3691},{},[3692,3697,3702],{"type":19,"tag":65,"props":3693,"children":3694},{},[3695],{"type":25,"value":3696},"Figma：协作式设计平台",{"type":19,"tag":65,"props":3698,"children":3699},{},[3700],{"type":25,"value":3701},"Adobe XD：原型设计工具",{"type":19,"tag":65,"props":3703,"children":3704},{},[3705],{"type":25,"value":3706},"Sketch：Mac平台设计软件",{"type":19,"tag":28,"props":3708,"children":3709},{},[3710],{"type":19,"tag":55,"props":3711,"children":3712},{},[3713],{"type":25,"value":3714},"开发工具：",{"type":19,"tag":61,"props":3716,"children":3717},{},[3718,3723,3728],{"type":19,"tag":65,"props":3719,"children":3720},{},[3721],{"type":25,"value":3722},"Chrome DevTools：浏览器调试工具",{"type":19,"tag":65,"props":3724,"children":3725},{},[3726],{"type":25,"value":3727},"Responsively：响应式测试应用",{"type":19,"tag":65,"props":3729,"children":3730},{},[3731],{"type":25,"value":3732},"Sizzy：多设备同步预览",{"type":19,"tag":28,"props":3734,"children":3735},{},[3736],{"type":19,"tag":55,"props":3737,"children":3738},{},[3739],{"type":25,"value":3740},"测试平台：",{"type":19,"tag":61,"props":3742,"children":3743},{},[3744,3749,3754],{"type":19,"tag":65,"props":3745,"children":3746},{},[3747],{"type":25,"value":3748},"BrowserStack：云端设备测试",{"type":19,"tag":65,"props":3750,"children":3751},{},[3752],{"type":25,"value":3753},"LambdaTest：跨浏览器测试",{"type":19,"tag":65,"props":3755,"children":3756},{},[3757],{"type":25,"value":3758},"Device Mode：本地设备模拟",{"type":19,"tag":40,"props":3760,"children":3762},{"id":3761},"学习资源",[3763],{"type":25,"value":3764},"📚 学习资源",{"type":19,"tag":28,"props":3766,"children":3767},{},[3768],{"type":25,"value":3769},"深入学习响应式设计：",{"type":19,"tag":28,"props":3771,"children":3772},{},[3773],{"type":19,"tag":55,"props":3774,"children":3775},{},[3776],{"type":25,"value":3777},"在线课程：",{"type":19,"tag":61,"props":3779,"children":3780},{},[3781,3786,3791],{"type":19,"tag":65,"props":3782,"children":3783},{},[3784],{"type":25,"value":3785},"MDN Web Docs：权威的Web标准文档",{"type":19,"tag":65,"props":3787,"children":3788},{},[3789],{"type":25,"value":3790},"CSS-Tricks：CSS技巧和教程",{"type":19,"tag":65,"props":3792,"children":3793},{},[3794],{"type":25,"value":3795},"A List Apart：Web设计理论文章",{"type":19,"tag":28,"props":3797,"children":3798},{},[3799],{"type":19,"tag":55,"props":3800,"children":3801},{},[3802],{"type":25,"value":3803},"实践项目：",{"type":19,"tag":61,"props":3805,"children":3806},{},[3807,3812,3817],{"type":19,"tag":65,"props":3808,"children":3809},{},[3810],{"type":25,"value":3811},"复制知名网站的响应式效果",{"type":19,"tag":65,"props":3813,"children":3814},{},[3815],{"type":25,"value":3816},"参与开源响应式框架",{"type":19,"tag":65,"props":3818,"children":3819},{},[3820],{"type":25,"value":3821},"建立个人响应式作品集",{"type":19,"tag":34,"props":3823,"children":3825},{"id":3824},"总结",[3826],{"type":25,"value":3824},{"type":19,"tag":28,"props":3828,"children":3829},{},[3830],{"type":25,"value":3831},"响应式设计是现代Web开发的核心技能。通过HTMLPAGE的可视化工具和本指南的系统方法，你可以：",{"type":19,"tag":492,"props":3833,"children":3834},{},[3835,3845,3855,3865,3875],{"type":19,"tag":65,"props":3836,"children":3837},{},[3838,3843],{"type":19,"tag":55,"props":3839,"children":3840},{},[3841],{"type":25,"value":3842},"掌握核心概念",{"type":25,"value":3844},"：理解移动优先和断点策略",{"type":19,"tag":65,"props":3846,"children":3847},{},[3848,3853],{"type":19,"tag":55,"props":3849,"children":3850},{},[3851],{"type":25,"value":3852},"熟练使用工具",{"type":25,"value":3854},"：利用HTMLPAGE的响应式功能",{"type":19,"tag":65,"props":3856,"children":3857},{},[3858,3863],{"type":19,"tag":55,"props":3859,"children":3860},{},[3861],{"type":25,"value":3862},"解决实际问题",{"type":25,"value":3864},"：处理常见的适配挑战",{"type":19,"tag":65,"props":3866,"children":3867},{},[3868,3873],{"type":19,"tag":55,"props":3869,"children":3870},{},[3871],{"type":25,"value":3872},"优化用户体验",{"type":25,"value":3874},"：创造流畅的多设备体验",{"type":19,"tag":65,"props":3876,"children":3877},{},[3878,3883],{"type":19,"tag":55,"props":3879,"children":3880},{},[3881],{"type":25,"value":3882},"持续改进",{"type":25,"value":3884},"：基于数据和反馈不断优化",{"type":19,"tag":28,"props":3886,"children":3887},{},[3888],{"type":25,"value":3889},"记住，最好的响应式设计是用户感觉不到的设计——无论在哪种设备上，用户都能自然、顺畅地完成他们的目标。",{"type":19,"tag":34,"props":3891,"children":3893},{"id":3892},"相关资源",[3894],{"type":25,"value":3892},{"type":19,"tag":61,"props":3896,"children":3897},{},[3898,3909,3920,3931],{"type":19,"tag":65,"props":3899,"children":3900},{},[3901,3907],{"type":19,"tag":2744,"props":3902,"children":3904},{"href":3903},"/guide/performance-optimization",[3905],{"type":25,"value":3906},"页面性能优化",{"type":25,"value":3908}," - 提升多设备加载速度",{"type":19,"tag":65,"props":3910,"children":3911},{},[3912,3918],{"type":19,"tag":2744,"props":3913,"children":3915},{"href":3914},"/guide/seo-optimization",[3916],{"type":25,"value":3917},"SEO优化指南",{"type":25,"value":3919}," - 移动端SEO策略",{"type":19,"tag":65,"props":3921,"children":3922},{},[3923,3929],{"type":19,"tag":2744,"props":3924,"children":3926},{"href":3925},"/guide/ux-design",[3927],{"type":25,"value":3928},"用户体验设计",{"type":25,"value":3930}," - 创造更好的交互体验",{"type":19,"tag":65,"props":3932,"children":3933},{},[3934,3940],{"type":19,"tag":2744,"props":3935,"children":3937},{"href":3936},"/guide/css-frameworks",[3938],{"type":25,"value":3939},"CSS框架指南",{"type":25,"value":3941}," - 响应式框架选择",{"type":19,"tag":34,"props":3943,"children":3945},{"id":3944},"立即开始响应式设计",[3946],{"type":25,"value":3944},{"type":19,"tag":28,"props":3948,"children":3949},{},[3950],{"type":25,"value":3951},"准备好创建完美适配的多设备网页了吗？",{"type":19,"tag":28,"props":3953,"children":3954},{},[3955,3964],{"type":19,"tag":2744,"props":3956,"children":3961},{"href":3957,"className":3958},"/",[3959,3960],"btn","btn-primary",[3962],{"type":25,"value":3963},"开始响应式设计",{"type":19,"tag":2744,"props":3965,"children":3969},{"href":3966,"className":3967},"/templates?responsive=true",[3959,3968],"btn-secondary",[3970],{"type":25,"value":3971},"查看响应式模板",{"type":19,"tag":3973,"props":3974,"children":3975},"style",{},[3976],{"type":25,"value":3977},"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);}",{"title":7,"searchDepth":202,"depth":202,"links":3979},[3980,3984,3989,3994,3999,4004,4008,4012,4016,4020,4021,4022],{"id":36,"depth":160,"text":36,"children":3981},[3982,3983],{"id":42,"depth":202,"text":45},{"id":118,"depth":202,"text":121},{"id":417,"depth":160,"text":420,"children":3985},[3986,3987,3988],{"id":423,"depth":202,"text":426},{"id":517,"depth":202,"text":520},{"id":746,"depth":202,"text":749},{"id":929,"depth":160,"text":929,"children":3990},[3991,3992,3993],{"id":934,"depth":202,"text":937},{"id":1085,"depth":202,"text":1088},{"id":1268,"depth":202,"text":1271},{"id":1456,"depth":160,"text":1456,"children":3995},[3996,3997,3998],{"id":1461,"depth":202,"text":1464},{"id":1674,"depth":202,"text":1677},{"id":2011,"depth":202,"text":2014},{"id":2083,"depth":160,"text":2083,"children":4000},[4001,4002,4003],{"id":2088,"depth":202,"text":2091},{"id":2568,"depth":202,"text":2571},{"id":2924,"depth":202,"text":2927},{"id":3196,"depth":160,"text":3196,"children":4005},[4006,4007],{"id":3201,"depth":202,"text":3204},{"id":3294,"depth":202,"text":3297},{"id":3387,"depth":160,"text":3387,"children":4009},[4010,4011],{"id":3392,"depth":202,"text":3395},{"id":3456,"depth":202,"text":3459},{"id":3547,"depth":160,"text":3547,"children":4013},[4014,4015],{"id":3552,"depth":202,"text":3555},{"id":3603,"depth":202,"text":3606},{"id":3667,"depth":160,"text":3667,"children":4017},[4018,4019],{"id":3672,"depth":202,"text":3675},{"id":3761,"depth":202,"text":3764},{"id":3824,"depth":160,"text":3824},{"id":3892,"depth":160,"text":3892},{"id":3944,"depth":160,"text":3944},"markdown","content:guide:responsive-design.md","content","guide/responsive-design.md","guide/responsive-design","md",[4030,4042,4053],{"_path":4031,"_dir":4032,"_draft":6,"_partial":6,"_locale":7,"title":4033,"description":4034,"keywords":4035,"author":12,"date":4036,"category":4037,"image":4038,"_type":4023,"_id":4039,"_source":4025,"_file":4040,"_stem":4041,"_extension":4028},"/blog/accessibility-guidelines","blog","无障碍设计指南","WCAG 标准和无障碍设计最佳实践","无障碍设计指南, Blog, HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg","content:blog:accessibility-guidelines.md","blog/accessibility-guidelines.md","blog/accessibility-guidelines",{"_path":4043,"_dir":4032,"_draft":6,"_partial":6,"_locale":7,"title":4044,"description":4045,"keywords":4046,"author":4047,"date":4048,"category":4049,"image":4038,"_type":4023,"_id":4050,"_source":4025,"_file":4051,"_stem":4052,"_extension":4028},"/blog/accessible-ux-research-guide","无障碍用户研究完全指南：从规划到实施的每一步","深入了解如何进行包容性的用户体验研究，确保残障用户的声音被听见，让产品真正为所有人而设计","用户研究, 无障碍设计, 包容设计, UX研究, 残障用户, 无障碍访问","HTMLPAGE 内容团队","2025-12-01","无障碍与设计","content:blog:accessible-ux-research-guide.md","blog/accessible-ux-research-guide.md","blog/accessible-ux-research-guide",{"_path":4054,"_dir":4032,"_draft":6,"_partial":6,"_locale":7,"title":4055,"description":4056,"keywords":4057,"author":12,"date":4036,"category":4037,"image":4038,"_type":4023,"_id":4058,"_source":4025,"_file":4059,"_stem":4060,"_extension":4028},"/blog/react-hooks-guide","React Hooks 实战指南","深入理解 React Hooks，包括 useState、useEffect、自定义 Hooks 等","React Hooks 实战指南, Blog, HTMLPAGE","content:blog:react-hooks-guide.md","blog/react-hooks-guide.md","blog/react-hooks-guide",1774945278673]