[{"data":1,"prerenderedAt":3288},["ShallowReactive",2],{"blog-css-responsive-text":3},{"id":4,"title":5,"body":6,"category":436,"date":3275,"description":3276,"draft":3277,"extension":3278,"meta":3279,"navigation":167,"path":3280,"seo":3281,"stem":3282,"tags":3283,"__hash__":3287},"blog\u002Fblog\u002Fcss-responsive-text.md","纯 CSS 响应式文字切换",{"type":7,"value":8,"toc":3268},"minimark",[9,13,27,30,43,48,55,103,113,116,431,434,559,576,580,587,712,890,899,902,954,961,964,978,981,3227,3233,3236,3265],[10,11,5],"h1",{"id":12},"纯-css-响应式文字切换",[14,15,16,17,21,22,26],"p",{},"响应式页面里，同一位置有时需要展示不同文案：窄屏写「手机端」，宽屏写「桌面端」。第一反应往往是 ",[18,19,20],"code",{},"window.resize"," 监听加 JS 改 DOM——其实用 ",[23,24,25],"strong",{},"CSS 媒体查询"," 就能做到，无需脚本、不阻塞渲染，对 SEO 和首屏也更友好。",[14,28,29],{},"本文对比两种纯 CSS 写法，并说明各自适用场景。示例断点统一为：",[31,32,33,37,40],"ul",{},[34,35,36],"li",{},"手机：\u003C 640px",[34,38,39],{},"平板：640px ~ 1023px",[34,41,42],{},"桌面：≥ 1024px",[44,45,47],"h2",{"id":46},"方案一伪元素-content","方案一：伪元素 + content",[14,49,50,51,54],{},"HTML 里放一个空元素（或只有装饰性内容），真正显示的文案写在 CSS ",[18,52,53],{},"content"," 里，按断点覆盖：",[56,57,62],"pre",{"className":58,"code":59,"language":60,"meta":61,"style":61},"language-html shiki shiki-themes github-light github-dark","\u003Cp class=\"responsive-text\" aria-label=\"随视口变化的提示文字\">\u003C\u002Fp>\n","html","",[18,63,64],{"__ignoreMap":61},[65,66,69,73,76,80,83,87,90,92,95,98,100],"span",{"class":67,"line":68},"line",1,[65,70,72],{"class":71},"sVt8B","\u003C",[65,74,14],{"class":75},"s9eBZ",[65,77,79],{"class":78},"sScJk"," class",[65,81,82],{"class":71},"=",[65,84,86],{"class":85},"sZZnC","\"responsive-text\"",[65,88,89],{"class":78}," aria-label",[65,91,82],{"class":71},[65,93,94],{"class":85},"\"随视口变化的提示文字\"",[65,96,97],{"class":71},">\u003C\u002F",[65,99,14],{"class":75},[65,101,102],{"class":71},">\n",[14,104,105,108,109,112],{},[18,106,107],{},"aria-label"," 给读屏软件提供可访问的固定描述；视觉文案由 ",[18,110,111],{},"::before"," 承担。",[14,114,115],{},"用 SCSS mixin 可以避免重复写媒体查询：",[117,118,121],"code-block",{"lang":119,"title":120},"scss","responsive-text mixin",[56,122,125],{"className":123,"code":124,"language":119,"meta":61,"style":61},"language-scss shiki shiki-themes github-light github-dark","$bp-tablet: 640px;\n$bp-desktop: 1024px;\n\n@mixin responsive-text($mobile, $tablet: null, $desktop: null) {\n  &::before {\n    content: $mobile;\n  }\n\n  @if $tablet {\n    @media (min-width: $bp-tablet) {\n      &::before {\n        content: $tablet;\n      }\n    }\n  }\n\n  @if $desktop {\n    @media (min-width: $bp-desktop) {\n      &::before {\n        content: $desktop;\n      }\n    }\n  }\n}\n\n.responsive-text {\n  @include responsive-text(\n    \"📱 手机端：窄屏阅读体验\",\n    \"📟 平板端：中等宽度布局\",\n    \"🖥️ 桌面端：宽屏完整展示\"\n  );\n}\n",[18,126,127,147,162,169,199,210,222,228,233,244,263,273,285,291,297,302,307,317,332,341,352,357,362,367,373,378,386,397,406,414,420,426],{"__ignoreMap":61},[65,128,129,133,136,140,144],{"class":67,"line":68},[65,130,132],{"class":131},"s4XuR","$bp-tablet",[65,134,135],{"class":71},": ",[65,137,139],{"class":138},"sj4cs","640",[65,141,143],{"class":142},"szBVR","px",[65,145,146],{"class":71},";\n",[65,148,150,153,155,158,160],{"class":67,"line":149},2,[65,151,152],{"class":131},"$bp-desktop",[65,154,135],{"class":71},[65,156,157],{"class":138},"1024",[65,159,143],{"class":142},[65,161,146],{"class":71},[65,163,165],{"class":67,"line":164},3,[65,166,168],{"emptyLinePlaceholder":167},true,"\n",[65,170,172,175,178,181,184,187,190,193,196],{"class":67,"line":171},4,[65,173,174],{"class":142},"@mixin",[65,176,177],{"class":78}," responsive-text",[65,179,180],{"class":71},"(",[65,182,183],{"class":131},"$mobile",[65,185,186],{"class":71},", ",[65,188,189],{"class":131},"$tablet",[65,191,192],{"class":71},": null, ",[65,194,195],{"class":131},"$desktop",[65,197,198],{"class":71},": null) {\n",[65,200,202,205,207],{"class":67,"line":201},5,[65,203,204],{"class":75},"  &",[65,206,111],{"class":78},[65,208,209],{"class":71}," {\n",[65,211,213,216,218,220],{"class":67,"line":212},6,[65,214,215],{"class":75},"    content",[65,217,135],{"class":71},[65,219,183],{"class":131},[65,221,146],{"class":71},[65,223,225],{"class":67,"line":224},7,[65,226,227],{"class":71},"  }\n",[65,229,231],{"class":67,"line":230},8,[65,232,168],{"emptyLinePlaceholder":167},[65,234,236,239,242],{"class":67,"line":235},9,[65,237,238],{"class":142},"  @if",[65,240,241],{"class":131}," $tablet",[65,243,209],{"class":71},[65,245,247,250,253,256,258,260],{"class":67,"line":246},10,[65,248,249],{"class":142},"    @media",[65,251,252],{"class":71}," (",[65,254,255],{"class":138},"min-width",[65,257,135],{"class":71},[65,259,132],{"class":131},[65,261,262],{"class":71},") {\n",[65,264,266,269,271],{"class":67,"line":265},11,[65,267,268],{"class":75},"      &",[65,270,111],{"class":78},[65,272,209],{"class":71},[65,274,276,279,281,283],{"class":67,"line":275},12,[65,277,278],{"class":75},"        content",[65,280,135],{"class":71},[65,282,189],{"class":131},[65,284,146],{"class":71},[65,286,288],{"class":67,"line":287},13,[65,289,290],{"class":71},"      }\n",[65,292,294],{"class":67,"line":293},14,[65,295,296],{"class":71},"    }\n",[65,298,300],{"class":67,"line":299},15,[65,301,227],{"class":71},[65,303,305],{"class":67,"line":304},16,[65,306,168],{"emptyLinePlaceholder":167},[65,308,310,312,315],{"class":67,"line":309},17,[65,311,238],{"class":142},[65,313,314],{"class":131}," $desktop",[65,316,209],{"class":71},[65,318,320,322,324,326,328,330],{"class":67,"line":319},18,[65,321,249],{"class":142},[65,323,252],{"class":71},[65,325,255],{"class":138},[65,327,135],{"class":71},[65,329,152],{"class":131},[65,331,262],{"class":71},[65,333,335,337,339],{"class":67,"line":334},19,[65,336,268],{"class":75},[65,338,111],{"class":78},[65,340,209],{"class":71},[65,342,344,346,348,350],{"class":67,"line":343},20,[65,345,278],{"class":75},[65,347,135],{"class":71},[65,349,195],{"class":131},[65,351,146],{"class":71},[65,353,355],{"class":67,"line":354},21,[65,356,290],{"class":71},[65,358,360],{"class":67,"line":359},22,[65,361,296],{"class":71},[65,363,365],{"class":67,"line":364},23,[65,366,227],{"class":71},[65,368,370],{"class":67,"line":369},24,[65,371,372],{"class":71},"}\n",[65,374,376],{"class":67,"line":375},25,[65,377,168],{"emptyLinePlaceholder":167},[65,379,381,384],{"class":67,"line":380},26,[65,382,383],{"class":78},".responsive-text",[65,385,209],{"class":71},[65,387,389,392,394],{"class":67,"line":388},27,[65,390,391],{"class":142},"  @include",[65,393,177],{"class":78},[65,395,396],{"class":71},"(\n",[65,398,400,403],{"class":67,"line":399},28,[65,401,402],{"class":85},"    \"📱 手机端：窄屏阅读体验\"",[65,404,405],{"class":71},",\n",[65,407,409,412],{"class":67,"line":408},29,[65,410,411],{"class":85},"    \"📟 平板端：中等宽度布局\"",[65,413,405],{"class":71},[65,415,417],{"class":67,"line":416},30,[65,418,419],{"class":85},"    \"🖥️ 桌面端：宽屏完整展示\"\n",[65,421,423],{"class":67,"line":422},31,[65,424,425],{"class":71},"  );\n",[65,427,429],{"class":67,"line":428},32,[65,430,372],{"class":71},[14,432,433],{},"编译后的核心 CSS 等价于：",[117,435,438],{"lang":436,"title":437},"css","编译结果（纯 CSS）",[56,439,442],{"className":440,"code":441,"language":436,"meta":61,"style":61},"language-css shiki shiki-themes github-light github-dark",".responsive-text::before {\n  content: \"📱 手机端：窄屏阅读体验\";\n}\n\n@media (min-width: 640px) {\n  .responsive-text::before {\n    content: \"📟 平板端：中等宽度布局\";\n  }\n}\n\n@media (min-width: 1024px) {\n  .responsive-text::before {\n    content: \"🖥️ 桌面端：宽屏完整展示\";\n  }\n}\n",[18,443,444,451,463,467,471,488,495,506,510,514,518,534,540,551,555],{"__ignoreMap":61},[65,445,446,449],{"class":67,"line":68},[65,447,448],{"class":78},".responsive-text::before",[65,450,209],{"class":71},[65,452,453,456,458,461],{"class":67,"line":149},[65,454,455],{"class":138},"  content",[65,457,135],{"class":71},[65,459,460],{"class":85},"\"📱 手机端：窄屏阅读体验\"",[65,462,146],{"class":71},[65,464,465],{"class":67,"line":164},[65,466,372],{"class":71},[65,468,469],{"class":67,"line":171},[65,470,168],{"emptyLinePlaceholder":167},[65,472,473,476,478,480,482,484,486],{"class":67,"line":201},[65,474,475],{"class":142},"@media",[65,477,252],{"class":71},[65,479,255],{"class":138},[65,481,135],{"class":71},[65,483,139],{"class":138},[65,485,143],{"class":142},[65,487,262],{"class":71},[65,489,490,493],{"class":67,"line":212},[65,491,492],{"class":78},"  .responsive-text::before",[65,494,209],{"class":71},[65,496,497,499,501,504],{"class":67,"line":224},[65,498,215],{"class":138},[65,500,135],{"class":71},[65,502,503],{"class":85},"\"📟 平板端：中等宽度布局\"",[65,505,146],{"class":71},[65,507,508],{"class":67,"line":230},[65,509,227],{"class":71},[65,511,512],{"class":67,"line":235},[65,513,372],{"class":71},[65,515,516],{"class":67,"line":246},[65,517,168],{"emptyLinePlaceholder":167},[65,519,520,522,524,526,528,530,532],{"class":67,"line":265},[65,521,475],{"class":142},[65,523,252],{"class":71},[65,525,255],{"class":138},[65,527,135],{"class":71},[65,529,157],{"class":138},[65,531,143],{"class":142},[65,533,262],{"class":71},[65,535,536,538],{"class":67,"line":275},[65,537,492],{"class":78},[65,539,209],{"class":71},[65,541,542,544,546,549],{"class":67,"line":287},[65,543,215],{"class":138},[65,545,135],{"class":71},[65,547,548],{"class":85},"\"🖥️ 桌面端：宽屏完整展示\"",[65,550,146],{"class":71},[65,552,553],{"class":67,"line":293},[65,554,227],{"class":71},[65,556,557],{"class":67,"line":299},[65,558,372],{"class":71},[14,560,561,564,565,568,569,571,572,575],{},[23,562,563],{},"优点","：HTML 极简，改文案只动样式。",[23,566,567],{},"局限","：",[18,570,53],{}," 只能是字符串，无法嵌入 ",[18,573,574],{},"\u003Cem>"," 等富文本标签。",[44,577,579],{"id":578},"方案二多段-span-display-切换","方案二：多段 span + display 切换",[14,581,582,583,586],{},"需要高亮关键词、换行或内联标签时，把各断点文案写成真实 DOM，用 ",[18,584,585],{},"display"," 控制显隐：",[56,588,590],{"className":58,"code":589,"language":60,"meta":61,"style":61},"\u003Cp class=\"responsive-spans\">\n  \u003Cspan class=\"is-mobile\">当前宽度 \u003C 640px，显示\u003Cem>手机\u003C\u002Fem>文案。\u003C\u002Fspan>\n  \u003Cspan class=\"is-tablet\">当前宽度 640px ~ 1023px，显示\u003Cem>平板\u003C\u002Fem>文案。\u003C\u002Fspan>\n  \u003Cspan class=\"is-desktop\">当前宽度 ≥ 1024px，显示\u003Cem>桌面\u003C\u002Fem>文案。\u003C\u002Fspan>\n\u003C\u002Fp>\n",[18,591,592,607,645,674,703],{"__ignoreMap":61},[65,593,594,596,598,600,602,605],{"class":67,"line":68},[65,595,72],{"class":71},[65,597,14],{"class":75},[65,599,79],{"class":78},[65,601,82],{"class":71},[65,603,604],{"class":85},"\"responsive-spans\"",[65,606,102],{"class":71},[65,608,609,612,614,616,618,621,624,627,630,633,636,638,641,643],{"class":67,"line":149},[65,610,611],{"class":71},"  \u003C",[65,613,65],{"class":75},[65,615,79],{"class":78},[65,617,82],{"class":71},[65,619,620],{"class":85},"\"is-mobile\"",[65,622,623],{"class":71},">当前宽度 ",[65,625,72],{"class":626},"s7hpK",[65,628,629],{"class":71}," 640px，显示\u003C",[65,631,632],{"class":75},"em",[65,634,635],{"class":71},">手机\u003C\u002F",[65,637,632],{"class":75},[65,639,640],{"class":71},">文案。\u003C\u002F",[65,642,65],{"class":75},[65,644,102],{"class":71},[65,646,647,649,651,653,655,658,661,663,666,668,670,672],{"class":67,"line":164},[65,648,611],{"class":71},[65,650,65],{"class":75},[65,652,79],{"class":78},[65,654,82],{"class":71},[65,656,657],{"class":85},"\"is-tablet\"",[65,659,660],{"class":71},">当前宽度 640px ~ 1023px，显示\u003C",[65,662,632],{"class":75},[65,664,665],{"class":71},">平板\u003C\u002F",[65,667,632],{"class":75},[65,669,640],{"class":71},[65,671,65],{"class":75},[65,673,102],{"class":71},[65,675,676,678,680,682,684,687,690,692,695,697,699,701],{"class":67,"line":171},[65,677,611],{"class":71},[65,679,65],{"class":75},[65,681,79],{"class":78},[65,683,82],{"class":71},[65,685,686],{"class":85},"\"is-desktop\"",[65,688,689],{"class":71},">当前宽度 ≥ 1024px，显示\u003C",[65,691,632],{"class":75},[65,693,694],{"class":71},">桌面\u003C\u002F",[65,696,632],{"class":75},[65,698,640],{"class":71},[65,700,65],{"class":75},[65,702,102],{"class":71},[65,704,705,708,710],{"class":67,"line":201},[65,706,707],{"class":71},"\u003C\u002F",[65,709,14],{"class":75},[65,711,102],{"class":71},[117,713,715],{"lang":119,"title":714},"按断点显示\u002F隐藏",[56,716,718],{"className":123,"code":717,"language":119,"meta":61,"style":61},".responsive-spans {\n  span {\n    display: none;\n  }\n\n  .is-mobile {\n    display: inline;\n  }\n\n  @media (min-width: 640px) {\n    .is-mobile { display: none; }\n    .is-tablet { display: inline; }\n  }\n\n  @media (min-width: 1024px) {\n    .is-tablet { display: none; }\n    .is-desktop { display: inline; }\n  }\n}\n",[18,719,720,727,734,746,750,754,761,772,776,780,797,814,829,833,837,853,867,882,886],{"__ignoreMap":61},[65,721,722,725],{"class":67,"line":68},[65,723,724],{"class":78},".responsive-spans",[65,726,209],{"class":71},[65,728,729,732],{"class":67,"line":149},[65,730,731],{"class":75},"  span",[65,733,209],{"class":71},[65,735,736,739,741,744],{"class":67,"line":164},[65,737,738],{"class":138},"    display",[65,740,135],{"class":71},[65,742,743],{"class":138},"none",[65,745,146],{"class":71},[65,747,748],{"class":67,"line":171},[65,749,227],{"class":71},[65,751,752],{"class":67,"line":201},[65,753,168],{"emptyLinePlaceholder":167},[65,755,756,759],{"class":67,"line":212},[65,757,758],{"class":78},"  .is-mobile",[65,760,209],{"class":71},[65,762,763,765,767,770],{"class":67,"line":224},[65,764,738],{"class":138},[65,766,135],{"class":71},[65,768,769],{"class":138},"inline",[65,771,146],{"class":71},[65,773,774],{"class":67,"line":230},[65,775,227],{"class":71},[65,777,778],{"class":67,"line":235},[65,779,168],{"emptyLinePlaceholder":167},[65,781,782,785,787,789,791,793,795],{"class":67,"line":246},[65,783,784],{"class":142},"  @media",[65,786,252],{"class":71},[65,788,255],{"class":138},[65,790,135],{"class":71},[65,792,139],{"class":138},[65,794,143],{"class":142},[65,796,262],{"class":71},[65,798,799,802,805,807,809,811],{"class":67,"line":265},[65,800,801],{"class":78},"    .is-mobile",[65,803,804],{"class":71}," { ",[65,806,585],{"class":138},[65,808,135],{"class":71},[65,810,743],{"class":138},[65,812,813],{"class":71},"; }\n",[65,815,816,819,821,823,825,827],{"class":67,"line":275},[65,817,818],{"class":78},"    .is-tablet",[65,820,804],{"class":71},[65,822,585],{"class":138},[65,824,135],{"class":71},[65,826,769],{"class":138},[65,828,813],{"class":71},[65,830,831],{"class":67,"line":287},[65,832,227],{"class":71},[65,834,835],{"class":67,"line":293},[65,836,168],{"emptyLinePlaceholder":167},[65,838,839,841,843,845,847,849,851],{"class":67,"line":299},[65,840,784],{"class":142},[65,842,252],{"class":71},[65,844,255],{"class":138},[65,846,135],{"class":71},[65,848,157],{"class":138},[65,850,143],{"class":142},[65,852,262],{"class":71},[65,854,855,857,859,861,863,865],{"class":67,"line":304},[65,856,818],{"class":78},[65,858,804],{"class":71},[65,860,585],{"class":138},[65,862,135],{"class":71},[65,864,743],{"class":138},[65,866,813],{"class":71},[65,868,869,872,874,876,878,880],{"class":67,"line":309},[65,870,871],{"class":78},"    .is-desktop",[65,873,804],{"class":71},[65,875,585],{"class":138},[65,877,135],{"class":71},[65,879,769],{"class":138},[65,881,813],{"class":71},[65,883,884],{"class":67,"line":319},[65,885,227],{"class":71},[65,887,888],{"class":67,"line":334},[65,889,372],{"class":71},[14,891,892,894,895,898],{},[23,893,563],{},"：支持富文本、SEO 友好的真实文本（爬虫能索引到当前可见段）。",[23,896,897],{},"代价","：HTML 略冗长，三份文案都要维护。",[44,900,901],{"id":901},"如何选择",[903,904,905,918],"table",{},[906,907,908],"thead",{},[909,910,911,915],"tr",{},[912,913,914],"th",{},"场景",[912,916,917],{},"推荐方案",[919,920,921,932,942],"tbody",{},[909,922,923,927],{},[924,925,926],"td",{},"纯装饰性标语、emoji 提示",[924,928,929,930],{},"伪元素 ",[18,931,53],{},[909,933,934,937],{},[924,935,936],{},"带强调、链接、多行排版",[924,938,939,940],{},"多段 ",[18,941,65],{},[909,943,944,947],{},[924,945,946],{},"强 SEO \u002F 无障碍",[924,948,949,951,952],{},[18,950,65],{}," + 语义标签；伪元素方案记得加 ",[18,953,107],{},[14,955,956,957,960],{},"两种方案都",[23,958,959],{},"不触发回流中的脚本","，性能友好，也适合 SSR 静态页。",[44,962,963],{"id":963},"交互演示",[14,965,966,967,977],{},"博客内的 REPL 预览区只有约 300px 宽，",[23,968,969,970,972,973,976],{},"视口 ",[18,971,475],{}," 与容器 ",[18,974,975],{},"@container"," 的 640 \u002F 1024 断点都凑不齐","。下方用滑块设定「逻辑宽度」，由 CSS 按档位切换文案（断点已缩小为 180px \u002F 260px 以适配预览区；正文方案仍为 640 \u002F 1024）。",[14,979,980],{},"拖动滑块或点预设按钮，观察文字与「当前档位」变化：",[982,983,985],"code-playground",{"title":984},"响应式文字切换",[56,986,990],{"className":987,"code":988,"language":989,"meta":61,"style":61},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv class=\"playground\">\n    \u003Cdiv class=\"toolbar\">\n      \u003Cdiv class=\"segmented\" role=\"group\" aria-label=\"选择档位\">\n        \u003Cbutton\n          type=\"button\"\n          :class=\"{ active: tier === 'mobile' }\"\n          @click=\"width = 150\"\n        >\n          手机\n        \u003C\u002Fbutton>\n        \u003Cbutton\n          type=\"button\"\n          :class=\"{ active: tier === 'tablet' }\"\n          @click=\"width = 220\"\n        >\n          平板\n        \u003C\u002Fbutton>\n        \u003Cbutton\n          type=\"button\"\n          :class=\"{ active: tier === 'desktop' }\"\n          @click=\"width = 320\"\n        >\n          桌面\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"slider-row\">\n        \u003Cspan>宽度\u003C\u002Fspan>\n        \u003Cinput\n          v-model.number=\"width\"\n          type=\"range\"\n          min=\"120\"\n          max=\"400\"\n          step=\"10\"\n        >\n        \u003Cspan class=\"width-readout\">{{ width }}px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv\n      class=\"viewport\"\n      :class=\"`tier-${tier}`\"\n      :style=\"{ width: `${width}px` }\"\n    >\n      \u003Cmain class=\"demo\">\n        \u003Cp class=\"demo-label\">预览\u003C\u002Fp>\n        \u003Cp class=\"responsive-text\" aria-label=\"随容器宽度变化的提示文字\" \u002F>\n        \u003Cp class=\"responsive-spans\">\n          \u003Cspan class=\"is-mobile\">窄容器，显示\u003Cem>手机\u003C\u002Fem>文案。\u003C\u002Fspan>\n          \u003Cspan class=\"is-tablet\">中等容器，显示\u003Cem>平板\u003C\u002Fem>文案。\u003C\u002Fspan>\n          \u003Cspan class=\"is-desktop\">宽容器，显示\u003Cem>桌面\u003C\u002Fem>文案。\u003C\u002Fspan>\n        \u003C\u002Fp>\n      \u003C\u002Fmain>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { computed, ref } from 'vue'\n\nconst width = ref(150)\n\nconst tier = computed(() => {\n  if (width.value >= 260) return 'desktop'\n  if (width.value >= 180) return 'tablet'\n  return 'mobile'\n})\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.playground {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 12px;\n  font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n}\n\n.toolbar {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 12px;\n}\n\n.segmented {\n  display: flex;\n  gap: 2px;\n  padding: 3px;\n  border-radius: 8px;\n  background: #e2e8f0;\n}\n\n.segmented button {\n  flex: 1;\n  border: none;\n  border-radius: 6px;\n  padding: 7px 0;\n  font-size: 12px;\n  font-weight: 500;\n  color: #64748b;\n  background: transparent;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s, box-shadow 0.15s;\n}\n\n.segmented button:hover {\n  color: #334155;\n}\n\n.segmented button.active {\n  background: #fff;\n  color: #0f172a;\n  box-shadow: 0 1px 2px rgb(15 23 42 \u002F 0.08);\n}\n\n.slider-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 11px;\n  color: #64748b;\n}\n\n.slider-row input {\n  flex: 1;\n  accent-color: #0ea5e9;\n}\n\n.width-readout {\n  min-width: 3rem;\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n  color: #334155;\n}\n\n.viewport {\n  max-width: 100%;\n  border: 1px solid #334155;\n  border-radius: 10px;\n  transition: width 0.15s ease;\n  overflow: hidden;\n}\n\n.demo {\n  padding: 16px;\n  background: #1e293b;\n  color: #e2e8f0;\n}\n\n.demo-label {\n  margin: 0 0 12px;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: #64748b;\n}\n\n.responsive-text {\n  margin: 0 0 12px;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 1.4;\n  color: #38bdf8;\n}\n\n.tier-mobile .responsive-text::before {\n  content: \"📱 手机端：窄屏阅读体验\";\n}\n\n.tier-tablet .responsive-text::before {\n  content: \"📟 平板端：中等宽度布局\";\n}\n\n.tier-desktop .responsive-text::before {\n  content: \"🖥️ 桌面端：宽屏完整展示\";\n}\n\n.responsive-spans {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.6;\n  color: #cbd5e1;\n}\n\n.responsive-spans span {\n  display: none;\n}\n\n.tier-mobile .responsive-spans .is-mobile {\n  display: inline;\n}\n\n.tier-tablet .responsive-spans .is-tablet {\n  display: inline;\n}\n\n.tier-desktop .responsive-spans .is-desktop {\n  display: inline;\n}\n\n.responsive-spans em {\n  font-style: normal;\n  color: #f472b6;\n  font-weight: 600;\n}\n\u003C\u002Fstyle>\n","vue",[18,991,992,1001,1017,1033,1064,1072,1082,1092,1102,1107,1112,1122,1128,1136,1145,1154,1158,1163,1171,1177,1185,1194,1203,1207,1212,1220,1229,1233,1248,1261,1268,1278,1287,1298,1309,1320,1325,1346,1355,1365,1370,1378,1389,1400,1411,1417,1434,1455,1480,1495,1524,1552,1580,1589,1598,1607,1617,1626,1631,1644,1659,1664,1687,1692,1713,1737,1756,1765,1771,1780,1785,1798,1806,1819,1835,1850,1878,1883,1888,1896,1909,1922,1937,1951,1956,1961,1969,1980,1994,2008,2023,2036,2041,2046,2056,2069,2081,2095,2112,2126,2139,2152,2164,2177,2213,2218,2223,2235,2247,2252,2257,2269,2281,2293,2337,2342,2347,2355,2366,2379,2392,2406,2417,2422,2427,2437,2448,2461,2466,2471,2479,2494,2507,2520,2531,2536,2541,2549,2563,2582,2595,2612,2625,2630,2635,2643,2657,2669,2680,2685,2690,2698,2717,2730,2741,2756,2769,2780,2785,2790,2797,2814,2828,2840,2853,2865,2870,2875,2886,2897,2902,2907,2917,2928,2933,2938,2948,2959,2964,2969,2976,2987,3001,3013,3025,3030,3035,3045,3056,3061,3066,3079,3090,3095,3100,3112,3123,3128,3133,3145,3156,3161,3166,3176,3189,3201,3213,3218],{"__ignoreMap":61},[65,993,994,996,999],{"class":67,"line":68},[65,995,72],{"class":71},[65,997,998],{"class":75},"template",[65,1000,102],{"class":71},[65,1002,1003,1005,1008,1010,1012,1015],{"class":67,"line":149},[65,1004,611],{"class":71},[65,1006,1007],{"class":75},"div",[65,1009,79],{"class":78},[65,1011,82],{"class":71},[65,1013,1014],{"class":85},"\"playground\"",[65,1016,102],{"class":71},[65,1018,1019,1022,1024,1026,1028,1031],{"class":67,"line":164},[65,1020,1021],{"class":71},"    \u003C",[65,1023,1007],{"class":75},[65,1025,79],{"class":78},[65,1027,82],{"class":71},[65,1029,1030],{"class":85},"\"toolbar\"",[65,1032,102],{"class":71},[65,1034,1035,1038,1040,1042,1044,1047,1050,1052,1055,1057,1059,1062],{"class":67,"line":171},[65,1036,1037],{"class":71},"      \u003C",[65,1039,1007],{"class":75},[65,1041,79],{"class":78},[65,1043,82],{"class":71},[65,1045,1046],{"class":85},"\"segmented\"",[65,1048,1049],{"class":78}," role",[65,1051,82],{"class":71},[65,1053,1054],{"class":85},"\"group\"",[65,1056,89],{"class":78},[65,1058,82],{"class":71},[65,1060,1061],{"class":85},"\"选择档位\"",[65,1063,102],{"class":71},[65,1065,1066,1069],{"class":67,"line":201},[65,1067,1068],{"class":71},"        \u003C",[65,1070,1071],{"class":75},"button\n",[65,1073,1074,1077,1079],{"class":67,"line":212},[65,1075,1076],{"class":78},"          type",[65,1078,82],{"class":71},[65,1080,1081],{"class":85},"\"button\"\n",[65,1083,1084,1087,1089],{"class":67,"line":224},[65,1085,1086],{"class":78},"          :class",[65,1088,82],{"class":71},[65,1090,1091],{"class":85},"\"{ active: tier === 'mobile' }\"\n",[65,1093,1094,1097,1099],{"class":67,"line":230},[65,1095,1096],{"class":78},"          @click",[65,1098,82],{"class":71},[65,1100,1101],{"class":85},"\"width = 150\"\n",[65,1103,1104],{"class":67,"line":235},[65,1105,1106],{"class":71},"        >\n",[65,1108,1109],{"class":67,"line":246},[65,1110,1111],{"class":71},"          手机\n",[65,1113,1114,1117,1120],{"class":67,"line":265},[65,1115,1116],{"class":71},"        \u003C\u002F",[65,1118,1119],{"class":75},"button",[65,1121,102],{"class":71},[65,1123,1124,1126],{"class":67,"line":275},[65,1125,1068],{"class":71},[65,1127,1071],{"class":75},[65,1129,1130,1132,1134],{"class":67,"line":287},[65,1131,1076],{"class":78},[65,1133,82],{"class":71},[65,1135,1081],{"class":85},[65,1137,1138,1140,1142],{"class":67,"line":293},[65,1139,1086],{"class":78},[65,1141,82],{"class":71},[65,1143,1144],{"class":85},"\"{ active: tier === 'tablet' }\"\n",[65,1146,1147,1149,1151],{"class":67,"line":299},[65,1148,1096],{"class":78},[65,1150,82],{"class":71},[65,1152,1153],{"class":85},"\"width = 220\"\n",[65,1155,1156],{"class":67,"line":304},[65,1157,1106],{"class":71},[65,1159,1160],{"class":67,"line":309},[65,1161,1162],{"class":71},"          平板\n",[65,1164,1165,1167,1169],{"class":67,"line":319},[65,1166,1116],{"class":71},[65,1168,1119],{"class":75},[65,1170,102],{"class":71},[65,1172,1173,1175],{"class":67,"line":334},[65,1174,1068],{"class":71},[65,1176,1071],{"class":75},[65,1178,1179,1181,1183],{"class":67,"line":343},[65,1180,1076],{"class":78},[65,1182,82],{"class":71},[65,1184,1081],{"class":85},[65,1186,1187,1189,1191],{"class":67,"line":354},[65,1188,1086],{"class":78},[65,1190,82],{"class":71},[65,1192,1193],{"class":85},"\"{ active: tier === 'desktop' }\"\n",[65,1195,1196,1198,1200],{"class":67,"line":359},[65,1197,1096],{"class":78},[65,1199,82],{"class":71},[65,1201,1202],{"class":85},"\"width = 320\"\n",[65,1204,1205],{"class":67,"line":364},[65,1206,1106],{"class":71},[65,1208,1209],{"class":67,"line":369},[65,1210,1211],{"class":71},"          桌面\n",[65,1213,1214,1216,1218],{"class":67,"line":375},[65,1215,1116],{"class":71},[65,1217,1119],{"class":75},[65,1219,102],{"class":71},[65,1221,1222,1225,1227],{"class":67,"line":380},[65,1223,1224],{"class":71},"      \u003C\u002F",[65,1226,1007],{"class":75},[65,1228,102],{"class":71},[65,1230,1231],{"class":67,"line":388},[65,1232,168],{"emptyLinePlaceholder":167},[65,1234,1235,1237,1239,1241,1243,1246],{"class":67,"line":399},[65,1236,1037],{"class":71},[65,1238,1007],{"class":75},[65,1240,79],{"class":78},[65,1242,82],{"class":71},[65,1244,1245],{"class":85},"\"slider-row\"",[65,1247,102],{"class":71},[65,1249,1250,1252,1254,1257,1259],{"class":67,"line":408},[65,1251,1068],{"class":71},[65,1253,65],{"class":75},[65,1255,1256],{"class":71},">宽度\u003C\u002F",[65,1258,65],{"class":75},[65,1260,102],{"class":71},[65,1262,1263,1265],{"class":67,"line":416},[65,1264,1068],{"class":71},[65,1266,1267],{"class":75},"input\n",[65,1269,1270,1273,1275],{"class":67,"line":422},[65,1271,1272],{"class":78},"          v-model.number",[65,1274,82],{"class":71},[65,1276,1277],{"class":85},"\"width\"\n",[65,1279,1280,1282,1284],{"class":67,"line":428},[65,1281,1076],{"class":78},[65,1283,82],{"class":71},[65,1285,1286],{"class":85},"\"range\"\n",[65,1288,1290,1293,1295],{"class":67,"line":1289},33,[65,1291,1292],{"class":78},"          min",[65,1294,82],{"class":71},[65,1296,1297],{"class":85},"\"120\"\n",[65,1299,1301,1304,1306],{"class":67,"line":1300},34,[65,1302,1303],{"class":78},"          max",[65,1305,82],{"class":71},[65,1307,1308],{"class":85},"\"400\"\n",[65,1310,1312,1315,1317],{"class":67,"line":1311},35,[65,1313,1314],{"class":78},"          step",[65,1316,82],{"class":71},[65,1318,1319],{"class":85},"\"10\"\n",[65,1321,1323],{"class":67,"line":1322},36,[65,1324,1106],{"class":71},[65,1326,1328,1330,1332,1334,1336,1339,1342,1344],{"class":67,"line":1327},37,[65,1329,1068],{"class":71},[65,1331,65],{"class":75},[65,1333,79],{"class":78},[65,1335,82],{"class":71},[65,1337,1338],{"class":85},"\"width-readout\"",[65,1340,1341],{"class":71},">{{ width }}px\u003C\u002F",[65,1343,65],{"class":75},[65,1345,102],{"class":71},[65,1347,1349,1351,1353],{"class":67,"line":1348},38,[65,1350,1224],{"class":71},[65,1352,1007],{"class":75},[65,1354,102],{"class":71},[65,1356,1358,1361,1363],{"class":67,"line":1357},39,[65,1359,1360],{"class":71},"    \u003C\u002F",[65,1362,1007],{"class":75},[65,1364,102],{"class":71},[65,1366,1368],{"class":67,"line":1367},40,[65,1369,168],{"emptyLinePlaceholder":167},[65,1371,1373,1375],{"class":67,"line":1372},41,[65,1374,1021],{"class":71},[65,1376,1377],{"class":75},"div\n",[65,1379,1381,1384,1386],{"class":67,"line":1380},42,[65,1382,1383],{"class":78},"      class",[65,1385,82],{"class":71},[65,1387,1388],{"class":85},"\"viewport\"\n",[65,1390,1392,1395,1397],{"class":67,"line":1391},43,[65,1393,1394],{"class":78},"      :class",[65,1396,82],{"class":71},[65,1398,1399],{"class":85},"\"`tier-${tier}`\"\n",[65,1401,1403,1406,1408],{"class":67,"line":1402},44,[65,1404,1405],{"class":78},"      :style",[65,1407,82],{"class":71},[65,1409,1410],{"class":85},"\"{ width: `${width}px` }\"\n",[65,1412,1414],{"class":67,"line":1413},45,[65,1415,1416],{"class":71},"    >\n",[65,1418,1420,1422,1425,1427,1429,1432],{"class":67,"line":1419},46,[65,1421,1037],{"class":71},[65,1423,1424],{"class":75},"main",[65,1426,79],{"class":78},[65,1428,82],{"class":71},[65,1430,1431],{"class":85},"\"demo\"",[65,1433,102],{"class":71},[65,1435,1437,1439,1441,1443,1445,1448,1451,1453],{"class":67,"line":1436},47,[65,1438,1068],{"class":71},[65,1440,14],{"class":75},[65,1442,79],{"class":78},[65,1444,82],{"class":71},[65,1446,1447],{"class":85},"\"demo-label\"",[65,1449,1450],{"class":71},">预览\u003C\u002F",[65,1452,14],{"class":75},[65,1454,102],{"class":71},[65,1456,1458,1460,1462,1464,1466,1468,1470,1472,1475,1478],{"class":67,"line":1457},48,[65,1459,1068],{"class":71},[65,1461,14],{"class":75},[65,1463,79],{"class":78},[65,1465,82],{"class":71},[65,1467,86],{"class":85},[65,1469,89],{"class":78},[65,1471,82],{"class":71},[65,1473,1474],{"class":85},"\"随容器宽度变化的提示文字\"",[65,1476,1477],{"class":626}," \u002F",[65,1479,102],{"class":71},[65,1481,1483,1485,1487,1489,1491,1493],{"class":67,"line":1482},49,[65,1484,1068],{"class":71},[65,1486,14],{"class":75},[65,1488,79],{"class":78},[65,1490,82],{"class":71},[65,1492,604],{"class":85},[65,1494,102],{"class":71},[65,1496,1498,1501,1503,1505,1507,1509,1512,1514,1516,1518,1520,1522],{"class":67,"line":1497},50,[65,1499,1500],{"class":71},"          \u003C",[65,1502,65],{"class":75},[65,1504,79],{"class":78},[65,1506,82],{"class":71},[65,1508,620],{"class":85},[65,1510,1511],{"class":71},">窄容器，显示\u003C",[65,1513,632],{"class":75},[65,1515,635],{"class":71},[65,1517,632],{"class":75},[65,1519,640],{"class":71},[65,1521,65],{"class":75},[65,1523,102],{"class":71},[65,1525,1527,1529,1531,1533,1535,1537,1540,1542,1544,1546,1548,1550],{"class":67,"line":1526},51,[65,1528,1500],{"class":71},[65,1530,65],{"class":75},[65,1532,79],{"class":78},[65,1534,82],{"class":71},[65,1536,657],{"class":85},[65,1538,1539],{"class":71},">中等容器，显示\u003C",[65,1541,632],{"class":75},[65,1543,665],{"class":71},[65,1545,632],{"class":75},[65,1547,640],{"class":71},[65,1549,65],{"class":75},[65,1551,102],{"class":71},[65,1553,1555,1557,1559,1561,1563,1565,1568,1570,1572,1574,1576,1578],{"class":67,"line":1554},52,[65,1556,1500],{"class":71},[65,1558,65],{"class":75},[65,1560,79],{"class":78},[65,1562,82],{"class":71},[65,1564,686],{"class":85},[65,1566,1567],{"class":71},">宽容器，显示\u003C",[65,1569,632],{"class":75},[65,1571,694],{"class":71},[65,1573,632],{"class":75},[65,1575,640],{"class":71},[65,1577,65],{"class":75},[65,1579,102],{"class":71},[65,1581,1583,1585,1587],{"class":67,"line":1582},53,[65,1584,1116],{"class":71},[65,1586,14],{"class":75},[65,1588,102],{"class":71},[65,1590,1592,1594,1596],{"class":67,"line":1591},54,[65,1593,1224],{"class":71},[65,1595,1424],{"class":75},[65,1597,102],{"class":71},[65,1599,1601,1603,1605],{"class":67,"line":1600},55,[65,1602,1360],{"class":71},[65,1604,1007],{"class":75},[65,1606,102],{"class":71},[65,1608,1610,1613,1615],{"class":67,"line":1609},56,[65,1611,1612],{"class":71},"  \u003C\u002F",[65,1614,1007],{"class":75},[65,1616,102],{"class":71},[65,1618,1620,1622,1624],{"class":67,"line":1619},57,[65,1621,707],{"class":71},[65,1623,998],{"class":75},[65,1625,102],{"class":71},[65,1627,1629],{"class":67,"line":1628},58,[65,1630,168],{"emptyLinePlaceholder":167},[65,1632,1634,1636,1639,1642],{"class":67,"line":1633},59,[65,1635,72],{"class":71},[65,1637,1638],{"class":75},"script",[65,1640,1641],{"class":78}," setup",[65,1643,102],{"class":71},[65,1645,1647,1650,1653,1656],{"class":67,"line":1646},60,[65,1648,1649],{"class":142},"import",[65,1651,1652],{"class":71}," { computed, ref } ",[65,1654,1655],{"class":142},"from",[65,1657,1658],{"class":85}," 'vue'\n",[65,1660,1662],{"class":67,"line":1661},61,[65,1663,168],{"emptyLinePlaceholder":167},[65,1665,1667,1670,1673,1676,1679,1681,1684],{"class":67,"line":1666},62,[65,1668,1669],{"class":142},"const",[65,1671,1672],{"class":138}," width",[65,1674,1675],{"class":142}," =",[65,1677,1678],{"class":78}," ref",[65,1680,180],{"class":71},[65,1682,1683],{"class":138},"150",[65,1685,1686],{"class":71},")\n",[65,1688,1690],{"class":67,"line":1689},63,[65,1691,168],{"emptyLinePlaceholder":167},[65,1693,1695,1697,1700,1702,1705,1708,1711],{"class":67,"line":1694},64,[65,1696,1669],{"class":142},[65,1698,1699],{"class":138}," tier",[65,1701,1675],{"class":142},[65,1703,1704],{"class":78}," computed",[65,1706,1707],{"class":71},"(() ",[65,1709,1710],{"class":142},"=>",[65,1712,209],{"class":71},[65,1714,1716,1719,1722,1725,1728,1731,1734],{"class":67,"line":1715},65,[65,1717,1718],{"class":142},"  if",[65,1720,1721],{"class":71}," (width.value ",[65,1723,1724],{"class":142},">=",[65,1726,1727],{"class":138}," 260",[65,1729,1730],{"class":71},") ",[65,1732,1733],{"class":142},"return",[65,1735,1736],{"class":85}," 'desktop'\n",[65,1738,1740,1742,1744,1746,1749,1751,1753],{"class":67,"line":1739},66,[65,1741,1718],{"class":142},[65,1743,1721],{"class":71},[65,1745,1724],{"class":142},[65,1747,1748],{"class":138}," 180",[65,1750,1730],{"class":71},[65,1752,1733],{"class":142},[65,1754,1755],{"class":85}," 'tablet'\n",[65,1757,1759,1762],{"class":67,"line":1758},67,[65,1760,1761],{"class":142},"  return",[65,1763,1764],{"class":85}," 'mobile'\n",[65,1766,1768],{"class":67,"line":1767},68,[65,1769,1770],{"class":71},"})\n",[65,1772,1774,1776,1778],{"class":67,"line":1773},69,[65,1775,707],{"class":71},[65,1777,1638],{"class":75},[65,1779,102],{"class":71},[65,1781,1783],{"class":67,"line":1782},70,[65,1784,168],{"emptyLinePlaceholder":167},[65,1786,1788,1790,1793,1796],{"class":67,"line":1787},71,[65,1789,72],{"class":71},[65,1791,1792],{"class":75},"style",[65,1794,1795],{"class":78}," scoped",[65,1797,102],{"class":71},[65,1799,1801,1804],{"class":67,"line":1800},72,[65,1802,1803],{"class":78},".playground",[65,1805,209],{"class":71},[65,1807,1809,1812,1814,1817],{"class":67,"line":1808},73,[65,1810,1811],{"class":138},"  box-sizing",[65,1813,135],{"class":71},[65,1815,1816],{"class":138},"border-box",[65,1818,146],{"class":71},[65,1820,1822,1825,1827,1830,1833],{"class":67,"line":1821},74,[65,1823,1824],{"class":138},"  width",[65,1826,135],{"class":71},[65,1828,1829],{"class":138},"100",[65,1831,1832],{"class":142},"%",[65,1834,146],{"class":71},[65,1836,1838,1841,1843,1846,1848],{"class":67,"line":1837},75,[65,1839,1840],{"class":138},"  padding",[65,1842,135],{"class":71},[65,1844,1845],{"class":138},"12",[65,1847,143],{"class":142},[65,1849,146],{"class":71},[65,1851,1853,1856,1858,1861,1863,1866,1868,1871,1873,1876],{"class":67,"line":1852},76,[65,1854,1855],{"class":138},"  font-family",[65,1857,135],{"class":71},[65,1859,1860],{"class":138},"system-ui",[65,1862,186],{"class":71},[65,1864,1865],{"class":138},"-apple-system",[65,1867,186],{"class":71},[65,1869,1870],{"class":85},"\"Segoe UI\"",[65,1872,186],{"class":71},[65,1874,1875],{"class":138},"sans-serif",[65,1877,146],{"class":71},[65,1879,1881],{"class":67,"line":1880},77,[65,1882,372],{"class":71},[65,1884,1886],{"class":67,"line":1885},78,[65,1887,168],{"emptyLinePlaceholder":167},[65,1889,1891,1894],{"class":67,"line":1890},79,[65,1892,1893],{"class":78},".toolbar",[65,1895,209],{"class":71},[65,1897,1899,1902,1904,1907],{"class":67,"line":1898},80,[65,1900,1901],{"class":138},"  display",[65,1903,135],{"class":71},[65,1905,1906],{"class":138},"flex",[65,1908,146],{"class":71},[65,1910,1912,1915,1917,1920],{"class":67,"line":1911},81,[65,1913,1914],{"class":138},"  flex-direction",[65,1916,135],{"class":71},[65,1918,1919],{"class":138},"column",[65,1921,146],{"class":71},[65,1923,1925,1928,1930,1933,1935],{"class":67,"line":1924},82,[65,1926,1927],{"class":138},"  gap",[65,1929,135],{"class":71},[65,1931,1932],{"class":138},"10",[65,1934,143],{"class":142},[65,1936,146],{"class":71},[65,1938,1940,1943,1945,1947,1949],{"class":67,"line":1939},83,[65,1941,1942],{"class":138},"  margin-bottom",[65,1944,135],{"class":71},[65,1946,1845],{"class":138},[65,1948,143],{"class":142},[65,1950,146],{"class":71},[65,1952,1954],{"class":67,"line":1953},84,[65,1955,372],{"class":71},[65,1957,1959],{"class":67,"line":1958},85,[65,1960,168],{"emptyLinePlaceholder":167},[65,1962,1964,1967],{"class":67,"line":1963},86,[65,1965,1966],{"class":78},".segmented",[65,1968,209],{"class":71},[65,1970,1972,1974,1976,1978],{"class":67,"line":1971},87,[65,1973,1901],{"class":138},[65,1975,135],{"class":71},[65,1977,1906],{"class":138},[65,1979,146],{"class":71},[65,1981,1983,1985,1987,1990,1992],{"class":67,"line":1982},88,[65,1984,1927],{"class":138},[65,1986,135],{"class":71},[65,1988,1989],{"class":138},"2",[65,1991,143],{"class":142},[65,1993,146],{"class":71},[65,1995,1997,1999,2001,2004,2006],{"class":67,"line":1996},89,[65,1998,1840],{"class":138},[65,2000,135],{"class":71},[65,2002,2003],{"class":138},"3",[65,2005,143],{"class":142},[65,2007,146],{"class":71},[65,2009,2011,2014,2016,2019,2021],{"class":67,"line":2010},90,[65,2012,2013],{"class":138},"  border-radius",[65,2015,135],{"class":71},[65,2017,2018],{"class":138},"8",[65,2020,143],{"class":142},[65,2022,146],{"class":71},[65,2024,2026,2029,2031,2034],{"class":67,"line":2025},91,[65,2027,2028],{"class":138},"  background",[65,2030,135],{"class":71},[65,2032,2033],{"class":138},"#e2e8f0",[65,2035,146],{"class":71},[65,2037,2039],{"class":67,"line":2038},92,[65,2040,372],{"class":71},[65,2042,2044],{"class":67,"line":2043},93,[65,2045,168],{"emptyLinePlaceholder":167},[65,2047,2049,2051,2054],{"class":67,"line":2048},94,[65,2050,1966],{"class":78},[65,2052,2053],{"class":75}," button",[65,2055,209],{"class":71},[65,2057,2059,2062,2064,2067],{"class":67,"line":2058},95,[65,2060,2061],{"class":138},"  flex",[65,2063,135],{"class":71},[65,2065,2066],{"class":138},"1",[65,2068,146],{"class":71},[65,2070,2072,2075,2077,2079],{"class":67,"line":2071},96,[65,2073,2074],{"class":138},"  border",[65,2076,135],{"class":71},[65,2078,743],{"class":138},[65,2080,146],{"class":71},[65,2082,2084,2086,2088,2091,2093],{"class":67,"line":2083},97,[65,2085,2013],{"class":138},[65,2087,135],{"class":71},[65,2089,2090],{"class":138},"6",[65,2092,143],{"class":142},[65,2094,146],{"class":71},[65,2096,2098,2100,2102,2105,2107,2110],{"class":67,"line":2097},98,[65,2099,1840],{"class":138},[65,2101,135],{"class":71},[65,2103,2104],{"class":138},"7",[65,2106,143],{"class":142},[65,2108,2109],{"class":138}," 0",[65,2111,146],{"class":71},[65,2113,2115,2118,2120,2122,2124],{"class":67,"line":2114},99,[65,2116,2117],{"class":138},"  font-size",[65,2119,135],{"class":71},[65,2121,1845],{"class":138},[65,2123,143],{"class":142},[65,2125,146],{"class":71},[65,2127,2129,2132,2134,2137],{"class":67,"line":2128},100,[65,2130,2131],{"class":138},"  font-weight",[65,2133,135],{"class":71},[65,2135,2136],{"class":138},"500",[65,2138,146],{"class":71},[65,2140,2142,2145,2147,2150],{"class":67,"line":2141},101,[65,2143,2144],{"class":138},"  color",[65,2146,135],{"class":71},[65,2148,2149],{"class":138},"#64748b",[65,2151,146],{"class":71},[65,2153,2155,2157,2159,2162],{"class":67,"line":2154},102,[65,2156,2028],{"class":138},[65,2158,135],{"class":71},[65,2160,2161],{"class":138},"transparent",[65,2163,146],{"class":71},[65,2165,2167,2170,2172,2175],{"class":67,"line":2166},103,[65,2168,2169],{"class":138},"  cursor",[65,2171,135],{"class":71},[65,2173,2174],{"class":138},"pointer",[65,2176,146],{"class":71},[65,2178,2180,2183,2185,2188,2191,2194,2196,2199,2201,2203,2206,2209,2211],{"class":67,"line":2179},104,[65,2181,2182],{"class":138},"  transition",[65,2184,135],{"class":71},[65,2186,2187],{"class":626},"background",[65,2189,2190],{"class":138}," 0.15",[65,2192,2193],{"class":142},"s",[65,2195,186],{"class":71},[65,2197,2198],{"class":138},"color",[65,2200,2190],{"class":138},[65,2202,2193],{"class":142},[65,2204,2205],{"class":71},", box-shadow ",[65,2207,2208],{"class":138},"0.15",[65,2210,2193],{"class":142},[65,2212,146],{"class":71},[65,2214,2216],{"class":67,"line":2215},105,[65,2217,372],{"class":71},[65,2219,2221],{"class":67,"line":2220},106,[65,2222,168],{"emptyLinePlaceholder":167},[65,2224,2226,2228,2230,2233],{"class":67,"line":2225},107,[65,2227,1966],{"class":78},[65,2229,2053],{"class":75},[65,2231,2232],{"class":78},":hover",[65,2234,209],{"class":71},[65,2236,2238,2240,2242,2245],{"class":67,"line":2237},108,[65,2239,2144],{"class":138},[65,2241,135],{"class":71},[65,2243,2244],{"class":138},"#334155",[65,2246,146],{"class":71},[65,2248,2250],{"class":67,"line":2249},109,[65,2251,372],{"class":71},[65,2253,2255],{"class":67,"line":2254},110,[65,2256,168],{"emptyLinePlaceholder":167},[65,2258,2260,2262,2264,2267],{"class":67,"line":2259},111,[65,2261,1966],{"class":78},[65,2263,2053],{"class":75},[65,2265,2266],{"class":78},".active",[65,2268,209],{"class":71},[65,2270,2272,2274,2276,2279],{"class":67,"line":2271},112,[65,2273,2028],{"class":138},[65,2275,135],{"class":71},[65,2277,2278],{"class":138},"#fff",[65,2280,146],{"class":71},[65,2282,2284,2286,2288,2291],{"class":67,"line":2283},113,[65,2285,2144],{"class":138},[65,2287,135],{"class":71},[65,2289,2290],{"class":138},"#0f172a",[65,2292,146],{"class":71},[65,2294,2296,2299,2301,2304,2307,2309,2312,2314,2317,2319,2322,2325,2328,2331,2334],{"class":67,"line":2295},114,[65,2297,2298],{"class":138},"  box-shadow",[65,2300,135],{"class":71},[65,2302,2303],{"class":138},"0",[65,2305,2306],{"class":138}," 1",[65,2308,143],{"class":142},[65,2310,2311],{"class":138}," 2",[65,2313,143],{"class":142},[65,2315,2316],{"class":138}," rgb",[65,2318,180],{"class":71},[65,2320,2321],{"class":138},"15",[65,2323,2324],{"class":138}," 23",[65,2326,2327],{"class":138}," 42",[65,2329,2330],{"class":71}," \u002F ",[65,2332,2333],{"class":138},"0.08",[65,2335,2336],{"class":71},");\n",[65,2338,2340],{"class":67,"line":2339},115,[65,2341,372],{"class":71},[65,2343,2345],{"class":67,"line":2344},116,[65,2346,168],{"emptyLinePlaceholder":167},[65,2348,2350,2353],{"class":67,"line":2349},117,[65,2351,2352],{"class":78},".slider-row",[65,2354,209],{"class":71},[65,2356,2358,2360,2362,2364],{"class":67,"line":2357},118,[65,2359,1901],{"class":138},[65,2361,135],{"class":71},[65,2363,1906],{"class":138},[65,2365,146],{"class":71},[65,2367,2369,2372,2374,2377],{"class":67,"line":2368},119,[65,2370,2371],{"class":138},"  align-items",[65,2373,135],{"class":71},[65,2375,2376],{"class":138},"center",[65,2378,146],{"class":71},[65,2380,2382,2384,2386,2388,2390],{"class":67,"line":2381},120,[65,2383,1927],{"class":138},[65,2385,135],{"class":71},[65,2387,2018],{"class":138},[65,2389,143],{"class":142},[65,2391,146],{"class":71},[65,2393,2395,2397,2399,2402,2404],{"class":67,"line":2394},121,[65,2396,2117],{"class":138},[65,2398,135],{"class":71},[65,2400,2401],{"class":138},"11",[65,2403,143],{"class":142},[65,2405,146],{"class":71},[65,2407,2409,2411,2413,2415],{"class":67,"line":2408},122,[65,2410,2144],{"class":138},[65,2412,135],{"class":71},[65,2414,2149],{"class":138},[65,2416,146],{"class":71},[65,2418,2420],{"class":67,"line":2419},123,[65,2421,372],{"class":71},[65,2423,2425],{"class":67,"line":2424},124,[65,2426,168],{"emptyLinePlaceholder":167},[65,2428,2430,2432,2435],{"class":67,"line":2429},125,[65,2431,2352],{"class":78},[65,2433,2434],{"class":75}," input",[65,2436,209],{"class":71},[65,2438,2440,2442,2444,2446],{"class":67,"line":2439},126,[65,2441,2061],{"class":138},[65,2443,135],{"class":71},[65,2445,2066],{"class":138},[65,2447,146],{"class":71},[65,2449,2451,2454,2456,2459],{"class":67,"line":2450},127,[65,2452,2453],{"class":138},"  accent-color",[65,2455,135],{"class":71},[65,2457,2458],{"class":138},"#0ea5e9",[65,2460,146],{"class":71},[65,2462,2464],{"class":67,"line":2463},128,[65,2465,372],{"class":71},[65,2467,2469],{"class":67,"line":2468},129,[65,2470,168],{"emptyLinePlaceholder":167},[65,2472,2474,2477],{"class":67,"line":2473},130,[65,2475,2476],{"class":78},".width-readout",[65,2478,209],{"class":71},[65,2480,2482,2485,2487,2489,2492],{"class":67,"line":2481},131,[65,2483,2484],{"class":138},"  min-width",[65,2486,135],{"class":71},[65,2488,2003],{"class":138},[65,2490,2491],{"class":142},"rem",[65,2493,146],{"class":71},[65,2495,2497,2500,2502,2505],{"class":67,"line":2496},132,[65,2498,2499],{"class":138},"  font-variant-numeric",[65,2501,135],{"class":71},[65,2503,2504],{"class":138},"tabular-nums",[65,2506,146],{"class":71},[65,2508,2510,2513,2515,2518],{"class":67,"line":2509},133,[65,2511,2512],{"class":138},"  text-align",[65,2514,135],{"class":71},[65,2516,2517],{"class":138},"right",[65,2519,146],{"class":71},[65,2521,2523,2525,2527,2529],{"class":67,"line":2522},134,[65,2524,2144],{"class":138},[65,2526,135],{"class":71},[65,2528,2244],{"class":138},[65,2530,146],{"class":71},[65,2532,2534],{"class":67,"line":2533},135,[65,2535,372],{"class":71},[65,2537,2539],{"class":67,"line":2538},136,[65,2540,168],{"emptyLinePlaceholder":167},[65,2542,2544,2547],{"class":67,"line":2543},137,[65,2545,2546],{"class":78},".viewport",[65,2548,209],{"class":71},[65,2550,2552,2555,2557,2559,2561],{"class":67,"line":2551},138,[65,2553,2554],{"class":138},"  max-width",[65,2556,135],{"class":71},[65,2558,1829],{"class":138},[65,2560,1832],{"class":142},[65,2562,146],{"class":71},[65,2564,2566,2568,2570,2572,2574,2577,2580],{"class":67,"line":2565},139,[65,2567,2074],{"class":138},[65,2569,135],{"class":71},[65,2571,2066],{"class":138},[65,2573,143],{"class":142},[65,2575,2576],{"class":138}," solid",[65,2578,2579],{"class":138}," #334155",[65,2581,146],{"class":71},[65,2583,2585,2587,2589,2591,2593],{"class":67,"line":2584},140,[65,2586,2013],{"class":138},[65,2588,135],{"class":71},[65,2590,1932],{"class":138},[65,2592,143],{"class":142},[65,2594,146],{"class":71},[65,2596,2598,2600,2603,2605,2607,2610],{"class":67,"line":2597},141,[65,2599,2182],{"class":138},[65,2601,2602],{"class":71},": width ",[65,2604,2208],{"class":138},[65,2606,2193],{"class":142},[65,2608,2609],{"class":138}," ease",[65,2611,146],{"class":71},[65,2613,2615,2618,2620,2623],{"class":67,"line":2614},142,[65,2616,2617],{"class":138},"  overflow",[65,2619,135],{"class":71},[65,2621,2622],{"class":138},"hidden",[65,2624,146],{"class":71},[65,2626,2628],{"class":67,"line":2627},143,[65,2629,372],{"class":71},[65,2631,2633],{"class":67,"line":2632},144,[65,2634,168],{"emptyLinePlaceholder":167},[65,2636,2638,2641],{"class":67,"line":2637},145,[65,2639,2640],{"class":78},".demo",[65,2642,209],{"class":71},[65,2644,2646,2648,2650,2653,2655],{"class":67,"line":2645},146,[65,2647,1840],{"class":138},[65,2649,135],{"class":71},[65,2651,2652],{"class":138},"16",[65,2654,143],{"class":142},[65,2656,146],{"class":71},[65,2658,2660,2662,2664,2667],{"class":67,"line":2659},147,[65,2661,2028],{"class":138},[65,2663,135],{"class":71},[65,2665,2666],{"class":138},"#1e293b",[65,2668,146],{"class":71},[65,2670,2672,2674,2676,2678],{"class":67,"line":2671},148,[65,2673,2144],{"class":138},[65,2675,135],{"class":71},[65,2677,2033],{"class":138},[65,2679,146],{"class":71},[65,2681,2683],{"class":67,"line":2682},149,[65,2684,372],{"class":71},[65,2686,2688],{"class":67,"line":2687},150,[65,2689,168],{"emptyLinePlaceholder":167},[65,2691,2693,2696],{"class":67,"line":2692},151,[65,2694,2695],{"class":78},".demo-label",[65,2697,209],{"class":71},[65,2699,2701,2704,2706,2708,2710,2713,2715],{"class":67,"line":2700},152,[65,2702,2703],{"class":138},"  margin",[65,2705,135],{"class":71},[65,2707,2303],{"class":138},[65,2709,2109],{"class":138},[65,2711,2712],{"class":138}," 12",[65,2714,143],{"class":142},[65,2716,146],{"class":71},[65,2718,2720,2722,2724,2726,2728],{"class":67,"line":2719},153,[65,2721,2117],{"class":138},[65,2723,135],{"class":71},[65,2725,2401],{"class":138},[65,2727,143],{"class":142},[65,2729,146],{"class":71},[65,2731,2733,2735,2737,2739],{"class":67,"line":2732},154,[65,2734,2131],{"class":138},[65,2736,135],{"class":71},[65,2738,2136],{"class":138},[65,2740,146],{"class":71},[65,2742,2744,2747,2749,2752,2754],{"class":67,"line":2743},155,[65,2745,2746],{"class":138},"  letter-spacing",[65,2748,135],{"class":71},[65,2750,2751],{"class":138},"0.04",[65,2753,632],{"class":142},[65,2755,146],{"class":71},[65,2757,2759,2762,2764,2767],{"class":67,"line":2758},156,[65,2760,2761],{"class":138},"  text-transform",[65,2763,135],{"class":71},[65,2765,2766],{"class":138},"uppercase",[65,2768,146],{"class":71},[65,2770,2772,2774,2776,2778],{"class":67,"line":2771},157,[65,2773,2144],{"class":138},[65,2775,135],{"class":71},[65,2777,2149],{"class":138},[65,2779,146],{"class":71},[65,2781,2783],{"class":67,"line":2782},158,[65,2784,372],{"class":71},[65,2786,2788],{"class":67,"line":2787},159,[65,2789,168],{"emptyLinePlaceholder":167},[65,2791,2793,2795],{"class":67,"line":2792},160,[65,2794,383],{"class":78},[65,2796,209],{"class":71},[65,2798,2800,2802,2804,2806,2808,2810,2812],{"class":67,"line":2799},161,[65,2801,2703],{"class":138},[65,2803,135],{"class":71},[65,2805,2303],{"class":138},[65,2807,2109],{"class":138},[65,2809,2712],{"class":138},[65,2811,143],{"class":142},[65,2813,146],{"class":71},[65,2815,2817,2819,2821,2824,2826],{"class":67,"line":2816},162,[65,2818,2117],{"class":138},[65,2820,135],{"class":71},[65,2822,2823],{"class":138},"18",[65,2825,143],{"class":142},[65,2827,146],{"class":71},[65,2829,2831,2833,2835,2838],{"class":67,"line":2830},163,[65,2832,2131],{"class":138},[65,2834,135],{"class":71},[65,2836,2837],{"class":138},"700",[65,2839,146],{"class":71},[65,2841,2843,2846,2848,2851],{"class":67,"line":2842},164,[65,2844,2845],{"class":138},"  line-height",[65,2847,135],{"class":71},[65,2849,2850],{"class":138},"1.4",[65,2852,146],{"class":71},[65,2854,2856,2858,2860,2863],{"class":67,"line":2855},165,[65,2857,2144],{"class":138},[65,2859,135],{"class":71},[65,2861,2862],{"class":138},"#38bdf8",[65,2864,146],{"class":71},[65,2866,2868],{"class":67,"line":2867},166,[65,2869,372],{"class":71},[65,2871,2873],{"class":67,"line":2872},167,[65,2874,168],{"emptyLinePlaceholder":167},[65,2876,2878,2881,2884],{"class":67,"line":2877},168,[65,2879,2880],{"class":78},".tier-mobile",[65,2882,2883],{"class":78}," .responsive-text::before",[65,2885,209],{"class":71},[65,2887,2889,2891,2893,2895],{"class":67,"line":2888},169,[65,2890,455],{"class":138},[65,2892,135],{"class":71},[65,2894,460],{"class":85},[65,2896,146],{"class":71},[65,2898,2900],{"class":67,"line":2899},170,[65,2901,372],{"class":71},[65,2903,2905],{"class":67,"line":2904},171,[65,2906,168],{"emptyLinePlaceholder":167},[65,2908,2910,2913,2915],{"class":67,"line":2909},172,[65,2911,2912],{"class":78},".tier-tablet",[65,2914,2883],{"class":78},[65,2916,209],{"class":71},[65,2918,2920,2922,2924,2926],{"class":67,"line":2919},173,[65,2921,455],{"class":138},[65,2923,135],{"class":71},[65,2925,503],{"class":85},[65,2927,146],{"class":71},[65,2929,2931],{"class":67,"line":2930},174,[65,2932,372],{"class":71},[65,2934,2936],{"class":67,"line":2935},175,[65,2937,168],{"emptyLinePlaceholder":167},[65,2939,2941,2944,2946],{"class":67,"line":2940},176,[65,2942,2943],{"class":78},".tier-desktop",[65,2945,2883],{"class":78},[65,2947,209],{"class":71},[65,2949,2951,2953,2955,2957],{"class":67,"line":2950},177,[65,2952,455],{"class":138},[65,2954,135],{"class":71},[65,2956,548],{"class":85},[65,2958,146],{"class":71},[65,2960,2962],{"class":67,"line":2961},178,[65,2963,372],{"class":71},[65,2965,2967],{"class":67,"line":2966},179,[65,2968,168],{"emptyLinePlaceholder":167},[65,2970,2972,2974],{"class":67,"line":2971},180,[65,2973,724],{"class":78},[65,2975,209],{"class":71},[65,2977,2979,2981,2983,2985],{"class":67,"line":2978},181,[65,2980,2703],{"class":138},[65,2982,135],{"class":71},[65,2984,2303],{"class":138},[65,2986,146],{"class":71},[65,2988,2990,2992,2994,2997,2999],{"class":67,"line":2989},182,[65,2991,2117],{"class":138},[65,2993,135],{"class":71},[65,2995,2996],{"class":138},"13",[65,2998,143],{"class":142},[65,3000,146],{"class":71},[65,3002,3004,3006,3008,3011],{"class":67,"line":3003},183,[65,3005,2845],{"class":138},[65,3007,135],{"class":71},[65,3009,3010],{"class":138},"1.6",[65,3012,146],{"class":71},[65,3014,3016,3018,3020,3023],{"class":67,"line":3015},184,[65,3017,2144],{"class":138},[65,3019,135],{"class":71},[65,3021,3022],{"class":138},"#cbd5e1",[65,3024,146],{"class":71},[65,3026,3028],{"class":67,"line":3027},185,[65,3029,372],{"class":71},[65,3031,3033],{"class":67,"line":3032},186,[65,3034,168],{"emptyLinePlaceholder":167},[65,3036,3038,3040,3043],{"class":67,"line":3037},187,[65,3039,724],{"class":78},[65,3041,3042],{"class":75}," span",[65,3044,209],{"class":71},[65,3046,3048,3050,3052,3054],{"class":67,"line":3047},188,[65,3049,1901],{"class":138},[65,3051,135],{"class":71},[65,3053,743],{"class":138},[65,3055,146],{"class":71},[65,3057,3059],{"class":67,"line":3058},189,[65,3060,372],{"class":71},[65,3062,3064],{"class":67,"line":3063},190,[65,3065,168],{"emptyLinePlaceholder":167},[65,3067,3069,3071,3074,3077],{"class":67,"line":3068},191,[65,3070,2880],{"class":78},[65,3072,3073],{"class":78}," .responsive-spans",[65,3075,3076],{"class":78}," .is-mobile",[65,3078,209],{"class":71},[65,3080,3082,3084,3086,3088],{"class":67,"line":3081},192,[65,3083,1901],{"class":138},[65,3085,135],{"class":71},[65,3087,769],{"class":138},[65,3089,146],{"class":71},[65,3091,3093],{"class":67,"line":3092},193,[65,3094,372],{"class":71},[65,3096,3098],{"class":67,"line":3097},194,[65,3099,168],{"emptyLinePlaceholder":167},[65,3101,3103,3105,3107,3110],{"class":67,"line":3102},195,[65,3104,2912],{"class":78},[65,3106,3073],{"class":78},[65,3108,3109],{"class":78}," .is-tablet",[65,3111,209],{"class":71},[65,3113,3115,3117,3119,3121],{"class":67,"line":3114},196,[65,3116,1901],{"class":138},[65,3118,135],{"class":71},[65,3120,769],{"class":138},[65,3122,146],{"class":71},[65,3124,3126],{"class":67,"line":3125},197,[65,3127,372],{"class":71},[65,3129,3131],{"class":67,"line":3130},198,[65,3132,168],{"emptyLinePlaceholder":167},[65,3134,3136,3138,3140,3143],{"class":67,"line":3135},199,[65,3137,2943],{"class":78},[65,3139,3073],{"class":78},[65,3141,3142],{"class":78}," .is-desktop",[65,3144,209],{"class":71},[65,3146,3148,3150,3152,3154],{"class":67,"line":3147},200,[65,3149,1901],{"class":138},[65,3151,135],{"class":71},[65,3153,769],{"class":138},[65,3155,146],{"class":71},[65,3157,3159],{"class":67,"line":3158},201,[65,3160,372],{"class":71},[65,3162,3164],{"class":67,"line":3163},202,[65,3165,168],{"emptyLinePlaceholder":167},[65,3167,3169,3171,3174],{"class":67,"line":3168},203,[65,3170,724],{"class":78},[65,3172,3173],{"class":75}," em",[65,3175,209],{"class":71},[65,3177,3179,3182,3184,3187],{"class":67,"line":3178},204,[65,3180,3181],{"class":138},"  font-style",[65,3183,135],{"class":71},[65,3185,3186],{"class":138},"normal",[65,3188,146],{"class":71},[65,3190,3192,3194,3196,3199],{"class":67,"line":3191},205,[65,3193,2144],{"class":138},[65,3195,135],{"class":71},[65,3197,3198],{"class":138},"#f472b6",[65,3200,146],{"class":71},[65,3202,3204,3206,3208,3211],{"class":67,"line":3203},206,[65,3205,2131],{"class":138},[65,3207,135],{"class":71},[65,3209,3210],{"class":138},"600",[65,3212,146],{"class":71},[65,3214,3216],{"class":67,"line":3215},207,[65,3217,372],{"class":71},[65,3219,3221,3223,3225],{"class":67,"line":3220},208,[65,3222,707],{"class":71},[65,3224,1792],{"class":75},[65,3226,102],{"class":71},[14,3228,3229,3230,3232],{},"将上文代码接入你的页面并部署后，拖窄浏览器窗口，或使用开发者工具的设备模拟，即可验证真实视口的 ",[18,3231,475],{}," 断点效果。",[44,3234,3235],{"id":3235},"小结",[31,3237,3238,3251,3259],{},[34,3239,3240,3241,3244,3245,3247,3248,3250],{},"用 ",[18,3242,3243],{},"@media (min-width)"," 按断点覆盖 ",[18,3246,53],{}," 或切换 ",[18,3249,585],{},"，即可实现无 JS 的响应式文案",[34,3252,3253,3254,3256,3257],{},"纯字符串标语用 ",[18,3255,111],{}," + mixin 最省事；富文本用多段 ",[18,3258,65],{},[34,3260,3261,3262,3264],{},"伪元素内容对读屏不友好，务必补充 ",[18,3263,107],{}," 或选用真实 DOM 方案",[1792,3266,3267],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":61,"searchDepth":164,"depth":164,"links":3269},[3270,3271,3272,3273,3274],{"id":46,"depth":149,"text":47},{"id":578,"depth":149,"text":579},{"id":901,"depth":149,"text":901},{"id":963,"depth":149,"text":963},{"id":3235,"depth":149,"text":3235},"2026-05-12","不依赖 JavaScript，用媒体查询配合伪元素 content 或多段 span 显示\u002F隐藏，随视口宽度自动切换文案。",false,"md",{},"\u002Fblog\u002Fcss-responsive-text",{"title":5,"description":3276},"blog\u002Fcss-responsive-text",[3284,3285,3286],"responsive","media-queries","pseudo-element","DeEdWkyNdRu8JUinAkU4L1nVNQUpWqvb9ku3Q6Mc1CY",1782309645711]