說明: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]