FAQ {#faq}

Grids {#grids}

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

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

  1. <div class="grid grid-cols-2 gap-4">
  2. <div>
  4. The first column
  6. </div>
  7. <div>
  9. The second column
  11. </div>
  12. </div>

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

  1. <div class="grid grid-cols-[200px,1fr,10%] gap-4">
  2. <div>
  4. The first column (200px)
  6. </div>
  7. <div>
  9. The second column (auto fit)
  11. </div>
  12. <div>
  14. The third column (10% width to parent container)
  16. </div>
  17. </div>

欲了解更多，请參考 Windi CSS 的 Grids 布局。

定位 {#positioning}

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

例如：

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

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

  1. ---
  2. canvasWidth: 800
  3. ---

Font Size {#font-size}

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

覆盖本地样式 {#override-local-style}

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

  1. # Page 1
  3. <style>
  4. h1 {
  5.   font-size: 10em;
  6. }
  7. </style>
  9. ---
  11. # Page 2
  13. This will not be affected.

了解更多：内联样式

覆盖全局样式

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

  1. /* style.css */ 
  3. h1 {
  4.   font-size: 10em !important;
  5. }

了解更多：全局样式

Canvas 缩放 {#scale-the-canvas}

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

  1. ---
  2. # default: 980
  3. # 由于画布变小，视觉尺寸也会变大
  4. canvasWidth: 800
  5. ---

使用 Transform {#use-transform}

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

  1. <Transform :scale="1.4">
  3. - Item 1
  4. - Item 2
  6. </Transform>