Help:CSS工具类、变量

这个页面【Help:CSS工具类、变量】是Vocawiki的帮助文档

本文用于介绍Vocawiki中一些特定功能的操作方法；
本文仅是一篇论述，不属于方针。如果本指南与相关方针发生冲突或存在不一致的情况，请以方针的条文为准。

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

工具类

基础

类名	说明
`hidden`	应用`display: none;`
`visually-hidden`	视觉上隐藏元素，但可被屏幕阅读器阅读、可被复制
`select-none`	应用`user-select: none;`及兼容属性

文字大小

以下工具类设置文字大小（并可能设置行高，依皮肤而定），适配了不同皮肤与皮肤选项^[1]。

类名	字号	实例文本
`text-xs`	更小	我能吞下玻璃而不伤身体。私はガラスを食べられます。それは私を傷つけません。 I can eat glass and it doesn't hurt me.
`text-sm`	小	我能吞下玻璃而不伤身体。私はガラスを食べられます。それは私を傷つけません。 I can eat glass and it doesn't hurt me.
`text-base`	常规^[2]	我能吞下玻璃而不伤身体。私はガラスを食べられます。それは私を傷つけません。 I can eat glass and it doesn't hurt me.
`text-lg`	大	我能吞下玻璃而不伤身体。私はガラスを食べられます。それは私を傷つけません。 I can eat glass and it doesn't hurt me.
`text-xl`	更大	我能吞下玻璃而不伤身体。私はガラスを食べられます。それは私を傷つけません。 I can eat glass and it doesn't hurt me.

响应式

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

`<body>`具有的类	内容区域宽度
`main-sm`	≥ 640 px
`main-md`	≥ 768 px
`main-lg`	≥ 1024 px
`main-xl`	≥ 1280 px
`main-2xl`	≥ 1536 px

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

创建响应式外观时，建议优先使用这些工具类，而非使用@media媒体查询。这是因为：

即使窗口宽度相同，不同皮肤上的内容区域宽度也并不一致；
就算在同一皮肤上，侧边栏的展开/折叠等状态也会影响内容区域的宽度。

因此根据窗口宽度来决定外观并不合理。

同时，建议开发者遵循“窄页面优先”的设计原则，即默认指定窄页面样式，再用针对更宽页面的样式覆盖。这是因为：即使你的设计没有完整考虑在所有设备上的效果，为窄页面设计的布局至少在桌面端能够完整展示，反之则不一定成立。

若确需限制样式只在某个宽度范围生效，请活用:not()伪类，如body.main-sm:not(.main-lg) { /* ... */ }只在 (640 px ≤ 宽度 < 768 px) 时生效。

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

无上述类

640 px

main-sm

768 px

main-md

1024 px

main-lg

1280 px

main-xl

1536 px

main-2xl

iPhone 12 Pro
（竖屏）

iPad Pro
（竖屏）

MacBook Air

示例

/示例/响应式.css：

.exmplate-responsive {
	display: grid;
	gap: 1rem;
}

body.main-sm .exmplate-responsive {
	grid-template-columns: repeat(2, 1fr);
}

body.main-md .exmplate-responsive {
	grid-template-columns: repeat(3, 1fr);
}

.exmplate-responsive > div {
	background: #39C5BB;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

/示例/响应式：

<templatestyles src="Help:CSS工具类、变量/示例/响应式.css" />
<div class="exmplate-responsive">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

效果（清调整窗口大小查看变化）：

1

2

3

4

5

6

Preflight

Preflight建立在modern-normalize之上，是Tailwind项目的一组基本样式，旨在消除跨浏览器的不一致性，并使你更容易在设计系统的约束范围内工作。详情请阅读Tailwind文档。

在Vocawiki中，符合div.preflight, span.preflight, .preflight *的元素受Preflight影响。完整样式请参阅源代码。

变量

变量名	说明
`--font-main`	Vocawiki所使用的主要字体列表
字体示例	我能吞下玻璃而不伤身体。私はガラスを食べられます。それは私を傷つけません。 I can eat glass and it doesn't hurt me.
`--font-mono`	Vocawiki所使用的等宽字体列表
字体示例	I can eat glass and it doesn't hurt me.
`--text-xs` `--text-xs` `--text-base` `--text-lg` `--text-xl`	字号，见#文字大小

注释

↑ “皮肤选项”：Citizen与Vector 2022均可设置文字大小，这些工具类尊重了这些选项。
↑ 此为正文默认字号。

[注-1] “皮肤选项”：Citizen与Vector 2022均可设置文字大小，这些工具类尊重了这些选项。

[2] 此为正文默认字号。

[1]

[2]