Help:CSS工具类、变量

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

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

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

工具类

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

响应式

根据主要内容区域（#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媒体查询。这是因为：即使窗口宽度相同，不同皮肤上的内容区域宽度也并不一致，并且就算在同一皮肤上，侧边栏的展开/折叠等状态也会影响内容区域的宽度。因此根据窗口宽度来决定外观并不合理。

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

无上述类

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

变量

变量名	说明
`--font-main`	Vocawiki所使用的主要字体列表
`--font-mono`	Vocawiki所使用的等宽字体列表