FAQ

Grids

由于 Slidev 基于 Web 运行，因此你可以使用任何想使用的布局方式。比如 CSS Grids，flexboxes，甚至是 Masonry，都可以完美兼容。

由于我们内置了 UnoCSS，你也可以参考使用如下方式：

<div class="grid grid-cols-2 gap-4">
<div>

The first column

</div>
<div>

The second column

</div>
</div>

你甚至可以定制每一列的大小，比如：

<div class="grid grid-cols-[200px_1fr_10%] gap-4">
<div>

The first column (200px)

</div>
<div>

The second column (auto fit)

</div>
<div>

The third column (10% width to parent container)

</div>
</div>

定位

幻灯片被定义为固定尺寸（默认为 980x552px），并会跟随用户屏幕进行缩放。你可以安全地在你的幻灯片中使用绝对定位，因为它们会随着屏幕的缩放而变化。

例如：

<div class="absolute left-30px bottom-30px">
This is a left-bottom aligned footer
</div>

如需改变 canvas 的实际尺寸，你可以在第一张幻灯片的 frontmatter 中传递 canvasWidth 选项：

---
canvasWidth: 800
---

Font Size

如果你觉得幻灯片的字体过小，你可以通过如下方式进行调整：

覆盖本地样式

你可以通过内联的 <style> 标签来覆盖每张幻灯片的样式。

# Page 1

<style>
h1 {
  font-size: 10em;
}
</style>

---

# Page 2

This will not be affected.

了解更多：内联样式

覆盖全局样式

你可以通过创建 ./style.css 文件的方式来提供自定义全局样式，例如：

/* style.css */

h1 {
  font-size: 10em !important;
}

了解更多：全局样式

Canvas 缩放

改变画布的实际尺寸将缩放所有内容（文本、图片、组件等）以及幻灯片。

---
# default: 980
# 由于画布变小，视觉尺寸也会变大
canvasWidth: 800
---

使用 Transform

我们提供了内置的 <Transform /> 组件，它针对 CSS 的 transform 属性进行了简易封装。

<Transform :scale="1.4">

- Item 1
- Item 2

</Transform>