[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive":1178,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive":1204},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":1174,"stem":1175,"id":1176,"extension":1177},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","响应式设计与交互","响应式布局让页面随视口、容器尺寸与用户偏好自适应。核心手段：视口 meta、弹性单位、媒体查询（视口级）与容器查询（组件级）。单位详解见 字体单位；布局见 Flex、Grid。","技能小册",[12,13],"css","responsive","2022-01-31",false,{"type":17,"value":18,"toc":1158},"minimark",[19,22,55,60,67,122,162,176,184,195,389,392,423,430,437,447,580,645,652,657,719,722,726,733,805,808,860,866,870,1001,1010,1013,1038,1041,1044,1154],[20,21,8],"h1",{"id":8},[23,24,25,26,30,31,34,35,38,39,44,45,49,50,54],"p",{},"响应式布局让页面随",[27,28,29],"strong",{},"视口、容器尺寸与用户偏好","自适应。核心手段：视口 meta、弹性单位、",[27,32,33],{},"媒体查询","（视口级）与",[27,36,37],{},"容器查询","（组件级）。单位详解见 ",[40,41,43],"a",{"href":42},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit","字体单位","；布局见 ",[40,46,48],{"href":47},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","Flex","、",[40,51,53],{"href":52},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","Grid","。",[56,57,59],"h2",{"id":58},"视口viewport","视口（Viewport）",[23,61,62,63,66],{},"移动端浏览器曾为适配桌面页使用约 ",[27,64,65],{},"980px 布局视口"," 并缩小显示。应在 HTML 中声明：",[68,69,74],"pre",{"className":70,"code":71,"language":72,"meta":73,"style":73},"language-html shiki shiki-themes material-theme-lighter github-light github-dark","\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \u002F>\n","html","",[75,76,77],"code",{"__ignoreMap":73},[78,79,82,86,90,94,97,101,105,107,110,112,114,117,119],"span",{"class":80,"line":81},"line",1,[78,83,85],{"class":84},"sP7_E","\u003C",[78,87,89],{"class":88},"sQzsp","meta",[78,91,93],{"class":92},"s9AJx"," name",[78,95,96],{"class":84},"=",[78,98,100],{"class":99},"sjJ54","\"",[78,102,104],{"class":103},"s_sjI","viewport",[78,106,100],{"class":99},[78,108,109],{"class":92}," content",[78,111,96],{"class":84},[78,113,100],{"class":99},[78,115,116],{"class":103},"width=device-width, initial-scale=1",[78,118,100],{"class":99},[78,120,121],{"class":84}," \u002F>\n",[123,124,125,138],"table",{},[126,127,128],"thead",{},[129,130,131,135],"tr",{},[132,133,134],"th",{},"参数",[132,136,137],{},"含义",[139,140,141,152],"tbody",{},[129,142,143,149],{},[144,145,146],"td",{},[75,147,148],{},"width=device-width",[144,150,151],{},"布局视口宽度 ≈ 设备 CSS 像素宽度",[129,153,154,159],{},[144,155,156],{},[75,157,158],{},"initial-scale=1",[144,160,161],{},"初始缩放 1:1",[23,163,164,167,168,171,172,175],{},[27,165,166],{},"无障碍","：避免 ",[75,169,170],{},"user-scalable=no"," 或 ",[75,173,174],{},"maximum-scale=1"," 阻止用户 pinch 放大（WCAG 建议允许缩放）。",[56,177,179,180,183],{"id":178},"媒体查询media","媒体查询（",[75,181,182],{},"@media","）",[23,185,186,187,190,191,194],{},"根据",[27,188,189],{},"视口","或",[27,192,193],{},"用户偏好","应用样式，是实现页面级断点的常用方式。",[68,196,199],{"className":197,"code":198,"language":12,"meta":73,"style":73},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","\u002F* 移动优先：默认小屏样式 *\u002F\n.container {\n    width: 100%;\n}\n\n@media (min-width: 768px) {\n    .container {\n        max-width: 720px;\n        margin-inline: auto;\n    }\n}\n\n@media (min-width: 1024px) {\n    .container {\n        max-width: 960px;\n    }\n}\n",[75,200,201,207,221,242,248,255,281,291,306,320,326,331,336,356,365,379,384],{"__ignoreMap":73},[78,202,203],{"class":80,"line":81},[78,204,206],{"class":205},"sutJx","\u002F* 移动优先：默认小屏样式 *\u002F\n",[78,208,210,214,218],{"class":80,"line":209},2,[78,211,213],{"class":212},"stp6e",".",[78,215,217],{"class":216},"sbgvK","container",[78,219,220],{"class":84}," {\n",[78,222,224,228,231,235,239],{"class":80,"line":223},3,[78,225,227],{"class":226},"soE4H","    width",[78,229,230],{"class":84},":",[78,232,234],{"class":233},"srdBf"," 100",[78,236,238],{"class":237},"sw1J6","%",[78,240,241],{"class":84},";\n",[78,243,245],{"class":80,"line":244},4,[78,246,247],{"class":84},"}\n",[78,249,251],{"class":80,"line":250},5,[78,252,254],{"emptyLinePlaceholder":253},true,"\n",[78,256,258,261,264,268,270,273,276,279],{"class":80,"line":257},6,[78,259,182],{"class":260},"sVHd0",[78,262,263],{"class":84}," (",[78,265,267],{"class":266},"sZMiF","min-width",[78,269,230],{"class":84},[78,271,272],{"class":233}," 768",[78,274,275],{"class":237},"px",[78,277,278],{"class":84},")",[78,280,220],{"class":84},[78,282,284,287,289],{"class":80,"line":283},7,[78,285,286],{"class":212},"    .",[78,288,217],{"class":216},[78,290,220],{"class":84},[78,292,294,297,299,302,304],{"class":80,"line":293},8,[78,295,296],{"class":226},"        max-width",[78,298,230],{"class":84},[78,300,301],{"class":233}," 720",[78,303,275],{"class":237},[78,305,241],{"class":84},[78,307,309,312,314,318],{"class":80,"line":308},9,[78,310,311],{"class":226},"        margin-inline",[78,313,230],{"class":84},[78,315,317],{"class":316},"s_hVV"," auto",[78,319,241],{"class":84},[78,321,323],{"class":80,"line":322},10,[78,324,325],{"class":84},"    }\n",[78,327,329],{"class":80,"line":328},11,[78,330,247],{"class":84},[78,332,334],{"class":80,"line":333},12,[78,335,254],{"emptyLinePlaceholder":253},[78,337,339,341,343,345,347,350,352,354],{"class":80,"line":338},13,[78,340,182],{"class":260},[78,342,263],{"class":84},[78,344,267],{"class":266},[78,346,230],{"class":84},[78,348,349],{"class":233}," 1024",[78,351,275],{"class":237},[78,353,278],{"class":84},[78,355,220],{"class":84},[78,357,359,361,363],{"class":80,"line":358},14,[78,360,286],{"class":212},[78,362,217],{"class":216},[78,364,220],{"class":84},[78,366,368,370,372,375,377],{"class":80,"line":367},15,[78,369,296],{"class":226},[78,371,230],{"class":84},[78,373,374],{"class":233}," 960",[78,376,275],{"class":237},[78,378,241],{"class":84},[78,380,382],{"class":80,"line":381},16,[78,383,325],{"class":84},[78,385,387],{"class":80,"line":386},17,[78,388,247],{"class":84},[23,390,391],{},"常用查询（不限于宽度）：",[393,394,395,405,411,417],"ul",{},[396,397,398,401,402],"li",{},[75,399,400],{},"(min-width: …)"," \u002F ",[75,403,404],{},"(max-width: …)",[396,406,407,410],{},[75,408,409],{},"(prefers-color-scheme: dark)"," 深色模式",[396,412,413,416],{},[75,414,415],{},"(prefers-reduced-motion: reduce)"," 减少动效",[396,418,419,422],{},[75,420,421],{},"(orientation: landscape)"," 横竖屏",[23,424,425,426,429],{},"断点宜按",[27,427,428],{},"内容与组件","，而非固定设备型号。",[56,431,433,434,183],{"id":432},"容器查询container","容器查询（",[75,435,436],{},"@container",[23,438,439,440,442,443,446],{},"媒体查询只看",[27,441,189],{},"；同一组件放在宽栏与窄栏时，视口相同但容器不同——容器查询按",[27,444,445],{},"祖先容器尺寸","切换样式。",[68,448,450],{"className":197,"code":449,"language":12,"meta":73,"style":73},".card-wrapper {\n    container-type: inline-size; \u002F* 或 container: card \u002F inline-size *\u002F\n    container-name: card; \u002F* 可选，命名后便于定向查询 *\u002F\n}\n\n.card {\n    display: flex;\n    flex-direction: column;\n}\n\n@container card (min-width: 400px) {\n    .card {\n        flex-direction: row;\n    }\n}\n",[75,451,452,461,478,493,497,501,510,522,534,538,542,552,560,572,576],{"__ignoreMap":73},[78,453,454,456,459],{"class":80,"line":81},[78,455,213],{"class":212},[78,457,458],{"class":216},"card-wrapper",[78,460,220],{"class":84},[78,462,463,466,468,472,475],{"class":80,"line":209},[78,464,465],{"class":226},"    container-type",[78,467,230],{"class":84},[78,469,471],{"class":470},"su5hD"," inline-size",[78,473,474],{"class":84},";",[78,476,477],{"class":205}," \u002F* 或 container: card \u002F inline-size *\u002F\n",[78,479,480,483,485,488,490],{"class":80,"line":223},[78,481,482],{"class":226},"    container-name",[78,484,230],{"class":84},[78,486,487],{"class":470}," card",[78,489,474],{"class":84},[78,491,492],{"class":205}," \u002F* 可选，命名后便于定向查询 *\u002F\n",[78,494,495],{"class":80,"line":244},[78,496,247],{"class":84},[78,498,499],{"class":80,"line":250},[78,500,254],{"emptyLinePlaceholder":253},[78,502,503,505,508],{"class":80,"line":257},[78,504,213],{"class":212},[78,506,507],{"class":216},"card",[78,509,220],{"class":84},[78,511,512,515,517,520],{"class":80,"line":283},[78,513,514],{"class":226},"    display",[78,516,230],{"class":84},[78,518,519],{"class":316}," flex",[78,521,241],{"class":84},[78,523,524,527,529,532],{"class":80,"line":293},[78,525,526],{"class":226},"    flex-direction",[78,528,230],{"class":84},[78,530,531],{"class":316}," column",[78,533,241],{"class":84},[78,535,536],{"class":80,"line":308},[78,537,247],{"class":84},[78,539,540],{"class":80,"line":322},[78,541,254],{"emptyLinePlaceholder":253},[78,543,544,546,549],{"class":80,"line":328},[78,545,436],{"class":260},[78,547,548],{"class":470}," card (min-width: 400px) ",[78,550,551],{"class":84},"{\n",[78,553,554,556,558],{"class":80,"line":333},[78,555,286],{"class":212},[78,557,507],{"class":216},[78,559,220],{"class":84},[78,561,562,565,567,570],{"class":80,"line":338},[78,563,564],{"class":226},"        flex-direction",[78,566,230],{"class":84},[78,568,569],{"class":316}," row",[78,571,241],{"class":84},[78,573,574],{"class":80,"line":358},[78,575,325],{"class":84},[78,577,578],{"class":80,"line":367},[78,579,247],{"class":84},[123,581,582,592],{},[126,583,584],{},[129,585,586,589],{},[132,587,588],{},"概念",[132,590,591],{},"说明",[139,593,594,607,617,627],{},[129,595,596,601],{},[144,597,598],{},[75,599,600],{},"container-type: inline-size",[144,602,603,604],{},"查询容器",[27,605,606],{},"行向（宽度）",[129,608,609,614],{},[144,610,611],{},[75,612,613],{},"container-type: size",[144,615,616],{},"行向与块向均可查（需明确高度）",[129,618,619,624],{},[144,620,621],{},[75,622,623],{},"@container (min-width: …)",[144,625,626],{},"条件满足时应用内部规则",[129,628,629,638],{},[144,630,631,49,634,637],{},[75,632,633],{},"cqw",[75,635,636],{},"cqi"," 等",[144,639,640,641,644],{},"相对容器尺寸的",[27,642,643],{},"容器查询单位","（见下表）",[23,646,647,648,54],{},"详见 ",[40,649,651],{"href":650},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css","现代 CSS 特性概览",[653,654,656],"h3",{"id":655},"容器查询单位常用","容器查询单位（常用）",[123,658,659,668],{},[126,660,661],{},[129,662,663,666],{},[132,664,665],{},"单位",[132,667,137],{},[139,669,670,679,689,701],{},[129,671,672,676],{},[144,673,674],{},[75,675,633],{},[144,677,678],{},"查询容器宽度的 1%",[129,680,681,686],{},[144,682,683],{},[75,684,685],{},"cqh",[144,687,688],{},"查询容器高度的 1%",[129,690,691,698],{},[144,692,693,401,695],{},[75,694,636],{},[75,696,697],{},"cqb",[144,699,700],{},"行内 \u002F 块向尺寸 1%（随书写模式）",[129,702,703,711],{},[144,704,705,401,708],{},[75,706,707],{},"cqmin",[75,709,710],{},"cqmax",[144,712,713,715,716,718],{},[75,714,636],{}," 与 ",[75,717,697],{}," 的较小\u002F较大者",[56,720,721],{"id":721},"媒体查询进阶",[653,723,725],{"id":724},"范围语法level-4","范围语法（Level 4）",[23,727,728,729,732],{},"除 ",[75,730,731],{},"(min-width: 768px)"," 外，可使用比较运算符（与数学区间一致）：",[68,734,736],{"className":197,"code":735,"language":12,"meta":73,"style":73},"@media (width >= 768px) {\n    \u002F* 等价于 min-width: 768px *\u002F\n}\n@media (768px \u003C= width \u003C= 1200px) {\n    \u002F* 区间 *\u002F\n}\n",[75,737,738,759,764,768,796,801],{"__ignoreMap":73},[78,739,740,742,744,747,751,753,755,757],{"class":80,"line":81},[78,741,182],{"class":260},[78,743,263],{"class":84},[78,745,746],{"class":266},"width",[78,748,750],{"class":749},"smGrS"," >=",[78,752,272],{"class":233},[78,754,275],{"class":237},[78,756,278],{"class":84},[78,758,220],{"class":84},[78,760,761],{"class":80,"line":209},[78,762,763],{"class":205},"    \u002F* 等价于 min-width: 768px *\u002F\n",[78,765,766],{"class":80,"line":223},[78,767,247],{"class":84},[78,769,770,772,774,777,779,782,785,787,790,792,794],{"class":80,"line":244},[78,771,182],{"class":260},[78,773,263],{"class":84},[78,775,776],{"class":233},"768",[78,778,275],{"class":237},[78,780,781],{"class":749}," \u003C=",[78,783,784],{"class":266}," width",[78,786,781],{"class":749},[78,788,789],{"class":233}," 1200",[78,791,275],{"class":237},[78,793,278],{"class":84},[78,795,220],{"class":84},[78,797,798],{"class":80,"line":250},[78,799,800],{"class":205},"    \u002F* 区间 *\u002F\n",[78,802,803],{"class":80,"line":257},[78,804,247],{"class":84},[653,806,807],{"id":807},"交互与能力查询",[123,809,810,820],{},[126,811,812],{},[129,813,814,817],{},[132,815,816],{},"查询",[132,818,819],{},"用途",[139,821,822,832,842,851],{},[129,823,824,829],{},[144,825,826],{},[75,827,828],{},"(hover: hover)",[144,830,831],{},"主输入可悬停（桌面鼠标）",[129,833,834,839],{},[144,835,836],{},[75,837,838],{},"(pointer: fine)",[144,840,841],{},"精细指针（鼠标、触控笔）",[129,843,844,848],{},[144,845,846],{},[75,847,415],{},[144,849,850],{},"用户请求减少动效",[129,852,853,857],{},[144,854,855],{},[75,856,409],{},[144,858,859],{},"深色配色偏好",[23,861,862,863,865],{},"组件 hover 样式宜与 ",[75,864,828],{}," 组合，避免触摸设备「粘住」hover 态。",[56,867,869],{"id":868},"弹性单位概要","弹性单位（概要）",[123,871,872,884],{},[126,873,874],{},[129,875,876,878,881],{},[132,877,665],{},[132,879,880],{},"参照",[132,882,883],{},"典型用途",[139,885,886,898,914,937,953,972,985],{},[129,887,888,892,895],{},[144,889,890],{},[75,891,238],{},[144,893,894],{},"父元素对应属性",[144,896,897],{},"宽度、部分高度（高度需父级有明确高度）",[129,899,900,908,911],{},[144,901,902,401,905],{},[75,903,904],{},"vw",[75,906,907],{},"vh",[144,909,910],{},"视口宽\u002F高 1%",[144,912,913],{},"全屏区块",[129,915,916,927,930],{},[144,917,918,401,921,401,924],{},[75,919,920],{},"dvh",[75,922,923],{},"svh",[75,925,926],{},"lvh",[144,928,929],{},"动态 \u002F 小 \u002F 大视口高度 1%",[144,931,932,933,936],{},"移动端全屏高度；",[75,934,935],{},"100dvh"," 随地址栏显隐变化",[129,938,939,947,950],{},[144,940,941,401,944],{},[75,942,943],{},"vmin",[75,945,946],{},"vmax",[144,948,949],{},"vw 与 vh 较小\u002F较大者",[144,951,952],{},"正方形、自适应缩放",[129,954,955,960,966],{},[144,956,957],{},[75,958,959],{},"rem",[144,961,962,963],{},"根元素 ",[75,964,965],{},"font-size",[144,967,968,969,183],{},"全局字号与间距（",[27,970,971],{},"不必依赖 JS",[129,973,974,979,982],{},[144,975,976],{},[75,977,978],{},"em",[144,980,981],{},"当前\u002F父级字号",[144,983,984],{},"组件内随字号伸缩的 padding",[129,986,987,992,995],{},[144,988,989],{},[75,990,991],{},"clamp(min, pref, max)",[144,993,994],{},"—",[144,996,997,998],{},"流式字号：",[75,999,1000],{},"font-size: clamp(1rem, 2.5vw, 1.5rem)",[23,1002,1003,1005,1006,1009],{},[75,1004,959],{}," 通过修改 ",[75,1007,1008],{},"html { font-size: 100%; }"," 或媒体查询调整根字号即可全站缩放，无需 rem+JS 适配方案才能生效。",[56,1011,1012],{"id":1012},"设计思路小结",[1014,1015,1016,1022,1028,1033],"ol",{},[396,1017,1018,1021],{},[27,1019,1020],{},"Viewport meta","：移动端正确宽度与可缩放。",[396,1023,1024,1027],{},[27,1025,1026],{},"弹性单位 + clamp","：骨架可伸缩。",[396,1029,1030,1032],{},[27,1031,33],{},"：页面级布局断点、主题与动效偏好。",[396,1034,1035,1037],{},[27,1036,37],{},"：组件在任意栏位自适应。",[56,1039,1040],{"id":1040},"参考文献",[23,1042,1043],{},"以下链接在编写时均可正常访问：",[123,1045,1046,1055],{},[126,1047,1048],{},[129,1049,1050,1053],{},[132,1051,1052],{},"资料",[132,1054,591],{},[139,1056,1057,1070,1082,1094,1106,1118,1130,1142],{},[129,1058,1059,1067],{},[144,1060,1061],{},[40,1062,1066],{"href":1063,"rel":1064},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FHTML\u002FViewport_meta_tag",[1065],"nofollow","MDN：使用视口 meta 标签",[144,1068,1069],{},"viewport 说明",[129,1071,1072,1079],{},[144,1073,1074],{},[40,1075,1078],{"href":1076,"rel":1077},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_media_queries\u002FUsing_media_queries",[1065],"MDN：使用媒体查询",[144,1080,1081],{},"@media 语法",[129,1083,1084,1091],{},[144,1085,1086],{},[40,1087,1090],{"href":1088,"rel":1089},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_container_queries",[1065],"MDN：CSS 容器查询",[144,1092,1093],{},"container-type、@container",[129,1095,1096,1103],{},[144,1097,1098],{},[40,1099,1102],{"href":1100,"rel":1101},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fclamp",[1065],"MDN：clamp()",[144,1104,1105],{},"流式尺寸",[129,1107,1108,1115],{},[144,1109,1110],{},[40,1111,1114],{"href":1112,"rel":1113},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fmediaqueries-4\u002F",[1065],"W3C：Media Queries Level 4",[144,1116,1117],{},"媒体查询规范（英文）",[129,1119,1120,1127],{},[144,1121,1122],{},[40,1123,1126],{"href":1124,"rel":1125},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-contain-3\u002F",[1065],"W3C：CSS Containment Module Level 3",[144,1128,1129],{},"容器查询规范（英文）",[129,1131,1132,1139],{},[144,1133,1134],{},[40,1135,1138],{"href":1136,"rel":1137},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Flength#dvh",[1065],"MDN：dvh",[144,1140,1141],{},"动态视口高度单位",[129,1143,1144,1151],{},[144,1145,1146],{},[40,1147,1150],{"href":1148,"rel":1149},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_container_queries#container_query_length_units",[1065],"MDN：Container query length units",[144,1152,1153],{},"cqw、cqi 等",[1155,1156,1157],"style",{},"html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .stp6e, html code.shiki .stp6e{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .soE4H, html code.shiki .soE4H{--shiki-light:#8796B0;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sw1J6, html code.shiki .sw1J6{--shiki-light:#F76D47;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":73,"searchDepth":209,"depth":209,"links":1159},[1160,1161,1163,1167,1171,1172,1173],{"id":58,"depth":209,"text":59},{"id":178,"depth":209,"text":1162},"媒体查询（@media）",{"id":432,"depth":209,"text":1164,"children":1165},"容器查询（@container）",[1166],{"id":655,"depth":223,"text":656},{"id":721,"depth":209,"text":721,"children":1168},[1169,1170],{"id":724,"depth":223,"text":725},{"id":807,"depth":223,"text":807},{"id":868,"depth":209,"text":869},{"id":1012,"depth":209,"text":1012},{"id":1040,"depth":209,"text":1040},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fresponsive","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fresponsive.md","md",{"items":1179},[1180,1184,1188,1192,1196,1200],{"path":1181,"title":1182,"description":1183,"category":10,"score":257},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":1185,"title":1186,"description":1187,"category":10,"score":257},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":1189,"title":1190,"description":1191,"category":10,"score":257},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules","模块与控制流：@use、内置函数、@if\u002F@for\u002F@each","Dart Sass 推荐用 @use\u002F@forward 替代已弃用的 @import；内置 sass:* 模块提供颜色、字符串、列表、Map、数学等函数；@if\u002F@for\u002F@each\u002F@while 用于条件与循环生成样式。",{"path":1193,"title":1194,"description":1195,"category":10,"score":257},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":1197,"title":1198,"description":1199,"category":10,"score":257},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":1201,"title":1202,"description":1203,"category":10,"score":257},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":1205,"title":12,"items":1206,"index":358,"prev":1262,"next":1263},"booklet\u002Fweb\u002Fcss",[1207,1211,1213,1217,1221,1224,1228,1230,1233,1237,1239,1243,1245,1249,1253,1254,1255,1256,1257,1258],{"path":1208,"title":1209,"date":1210,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation","变换、过渡与动画","2023-01-09",{"path":1201,"title":1202,"date":1212,"pinned":15},"2025-05-01",{"path":1214,"title":1215,"date":1216,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","2019-09-28",{"path":1218,"title":1219,"date":1220,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","display 与常规流","2024-01-30",{"path":47,"title":1222,"date":1223,"pinned":15},"弹性盒子","2020-09-29",{"path":1225,"title":1226,"date":1227,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization","字体优化策略","2021-04-23",{"path":42,"title":43,"date":1229,"pinned":15},"2021-10-12",{"path":52,"title":1231,"date":1232,"pinned":15},"网格布局","2020-11-09",{"path":1234,"title":1235,"date":1236,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Flayout-text","排版与文本","2024-01-25",{"path":1181,"title":1182,"date":1238,"pinned":15},"2026-07-23",{"path":1240,"title":1241,"date":1242,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","盒模型","2023-09-04",{"path":650,"title":651,"date":1244,"pinned":15},"2021-11-09",{"path":1246,"title":1247,"date":1248,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition","定位","2022-11-08",{"path":1250,"title":1251,"date":1252,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","2024-07-02",{"path":7,"title":8,"date":14,"pinned":15},{"path":1185,"title":1186,"date":1238,"pinned":15},{"path":1189,"title":1190,"date":1238,"pinned":15},{"path":1193,"title":1194,"date":1238,"pinned":15},{"path":1197,"title":1198,"date":1238,"pinned":15},{"path":1259,"title":1260,"date":1261,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects","视觉效果","2021-11-04",{"path":1250,"title":1251,"date":1252,"pinned":15},{"path":1185,"title":1186,"date":1238,"pinned":15}]