說明: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所使用的等寬字體列表