Help:CSS工具类、变量

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

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

工具类

工具类由全站CSS或全站JS定义，在所有页面可用。

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

.content-info

一个类名为content-info的元素会作为.mw-parser-output的第一个子元素被插入到DOM中，该元素不具有任何外观。

根据.mw-parser-output的宽度，该元素动态地还具有以下类：

class	宽度
sm	≥ 640 px
md	≥ 768 px
lg	≥ 1024 px
xl	≥ 1280 px
2xl	≥ 1536 px

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

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

无上述类

640 px

sm

768 px

md

1024 px

lg

1280 px

xl

1536 px

2xl

iPhone 12 Pro
（竖屏）

iPad Pro
（竖屏）

MacBook Air

示例

Help:CSS工具类、变量/示例/响应式.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;
}

Help:CSS工具类、变量/示例/响应式：

<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

变量

暂无。