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