查看“︁Help:CSS工具类、变量”︁的源代码

{{帮助}}

本页所列举的工具类、变量通过全站CSS或全站JS提供，在所有皮肤、所有页面可用。

== 工具类 ==

{| class="wikitable"
! 类名 !! 说明
|-
| <code>hidden</code>
| 应用<code>display: none;</code>
|-
| <code>visually-hidden</code>
| 视觉上隐藏元素，但可被屏幕阅读器阅读、可被复制
|-
| <code>select-none</code>
| 应用<code>user-select: none;</code>及兼容属性
|}

=== 响应式 ===

根据主要内容区域（<code>#mw-content-text</code>）的宽度，<code>&lt;body&gt;</code>元素动态地具有以下类：

{| class="wikitable"
! <code>&lt;body&gt;</code>具有的类 !! 内容区域宽度
|-
| <code>main-sm</code> || ≥ 640 px
|-
| <code>main-md</code> || ≥ 768 px
|-
| <code>main-lg</code> || ≥ 1024 px
|-
| <code>main-xl</code> || ≥ 1280 px
|-
| <code>main-2xl</code> || ≥ 1536 px
|}

例如：当<code>.mw-parser-output</code>宽度为1100 px时，<code>&lt;body&gt;</code>将同时具有<code>main-sm</code>、<code>main-md</code>、<code>main-lg</code>类；而当<code>.mw-parser-output</code>宽度为400 px时，<code>&lt;body&gt;</code>将不具有上述任何一个类。

创建响应式外观时，建议优先使用这些工具类，而非使用<code>@media</code>媒体查询。这是因为：即使窗口宽度相同，不同皮肤上的内容区域宽度也并不一致，并且就算在同一皮肤上，侧边栏的展开/折叠等状态也会影响内容区域的宽度。因此根据窗口宽度来决定外观并不合理。

==== 宽度可视化（可左右滚动）====

<div style="overflow-x: auto">
<div style="display: grid; grid-auto-flow: column; grid-template-rows: auto 2rem; grid-template-columns: 640px calc(768px - 640px) calc(1024px - 768px) calc(1280px - 1024px) calc(1536px - 1280px) calc(1920px - 1536px);">
<div></div>
<div style="display: flex; align-items: center; justify-content: center; margin-right: 1px; background: {{hct|0 60 60}}; color: #fff;">无上述类</div>
<div style="border-left: 1px solid; padding-left: .2em;">640 px</div>
<div style="display: flex; align-items: center; justify-content: center; margin-right: 1px; background: {{hct|60 60 60}};"><code>main-sm</code></div>
<div style="border-left: 1px solid; padding-left: .2em;">768 px</div>
<div style="display: flex; align-items: center; justify-content: center; margin-right: 1px; background: {{hct|120 60 60}};"><code>main-md</code></div>
<div style="border-left: 1px solid; padding-left: .2em;">1024 px</div>
<div style="display: flex; align-items: center; justify-content: center; margin-right: 1px; background: {{hct|180 60 60}};"><code>main-lg</code></div>
<div style="border-left: 1px solid; padding-left: .2em;">1280 px</div>
<div style="display: flex; align-items: center; justify-content: center; margin-right: 1px; background: {{hct|240 60 60}};"><code>main-xl</code></div>
<div style="border-left: 1px solid; padding-left: .2em;">1536 px</div>
<div style="display: flex; align-items: center; justify-content: center; margin-right: 1px; background: {{hct|300 60 60}};"><code>main-2xl</code></div>
</div>

<div style="position: relative; text-align: center; overflow: hidden; width: calc(1440px + 4rem); height: 32rem; font-size: 32px; font-weight: 700; margin-top: 1rem; pointer-events: none; -webkit-mask-image: -webkit-linear-gradient(#fff 30rem, transparent); mask-image: linear-gradient(#fff 30rem, transparent);">
<div style="box-sizing: border-box; padding-top: 2rem; width: 390px; height: 844px; border: 4px solid; border-radius: .5rem; position: absolute; left: 4rem; top: 4rem; color: {{hct|0 60 60}}; box-shadow: inset 0 0 1rem; text-shadow: 0 0 3rem;"><span style="pointer-events: all;">iPhone 12 Pro<br>（竖屏）</span></div>
<div style="box-sizing: border-box; padding-top: 8rem; width: 1024px; height: 1366px; border: 4px solid; border-radius: .5rem; position: absolute; left: 2rem; top: 2rem; color: {{hct|120 60 60}}; box-shadow: inset 0 0 1rem; text-shadow: 0 0 3rem;"><span style="pointer-events: all;">iPad Pro<br>（竖屏）</span></div>
<div style="box-sizing: border-box; padding-top: 18rem; width: 1440px; height: 900px; border: 4px solid; border-radius: .5rem; position: absolute; left: 0; top: 0; color: {{hct|240 60 60}}; box-shadow: inset 0 0 1rem; text-shadow: 0 0 3rem;"><span style="pointer-events: all;">MacBook Air</span></div>
</div>
</div>

==== 示例 ====

[[/示例/响应式.css]]：
{{页面源代码|{{FULLPAGENAME}}/示例/响应式.css|lang=css}}

[[/示例/响应式]]：
{{页面源代码|{{FULLPAGENAME}}/示例/响应式|lang=wikitext}}

效果（清调整窗口大小查看变化）：
{{/示例/响应式}}

== 变量 ==

{| class="wikitable"
! 变量名 !! 说明
|-
| <code>--font-main</code>
| {{SITENAME}}所使用的主要字体列表
|-
| <code>--font-mono</code>
| {{SITENAME}}所使用的等宽字体列表
|}