PostCSS 100vh Fix 使用教程

项目介绍

postcss-100vh-fix 是一个 PostCSS 插件，旨在解决在 iOS 设备上使用 height: 100vh 或 min-height: 100vh 时的问题。在 iOS 上，100vh 包含了地址栏和工具栏的高度，导致页面内容被遮挡或出现滚动条。该插件通过自动调整高度，确保页面内容在不同设备上显示一致。

项目快速启动

安装

首先，确保你已经安装了 postcss 和 postcss-100vh-fix：

npm install --save-dev postcss postcss-100vh-fix

配置

在你的项目中添加或更新 PostCSS 配置文件（例如 postcss.config.js）：

module.exports = {
  plugins: [
    require('postcss-100vh-fix'),
    require('autoprefixer')
  ]
};

使用

在你的 CSS 文件中使用 height: 100vh 或 min-height: 100vh：

body {
  height: 100vh; /* 或 min-height: 100vh */
}

应用案例和最佳实践

案例一：移动端页面布局

在移动端页面布局中，使用 100vh 可以确保页面内容占据整个屏幕高度，避免内容被底部工具栏遮挡。

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

最佳实践

1. 确保所有上级容器高度为100%：为了确保 100vh 正确工作，所有上级容器的高度也应设置为 100%。
2. 避免部分高度：该插件不支持部分高度，如 height: 90vh 或 height: calc(100vh - 60px)，应避免使用。

典型生态项目

PostCSS

postcss-100vh-fix 是 PostCSS 生态系统的一部分。PostCSS 是一个强大的 CSS 处理工具，通过插件可以实现各种功能，如自动前缀添加、CSS 模块化等。

Autoprefixer

在配置文件中，我们同时使用了 autoprefixer 插件，它可以帮助我们自动添加浏览器前缀，确保 CSS 在不同浏览器中的兼容性。

module.exports = {
  plugins: [
    require('postcss-100vh-fix'),
    require('autoprefixer')
  ]
};

通过结合这些插件，可以构建出兼容性强、性能优化的前端项目。