PostCSS 100vh Fix 项目教程

1. 项目的目录结构及介绍

postcss-100vh-fix/
├── src/
│   ├── index.js
│   └── ...
├── test/
│   ├── index.test.js
│   └── ...
├── .gitignore
├── .npmrc
├── .travis.yml
├── LICENSE
├── README.md
├── package.json
└── postcss.config.js

• src/: 包含项目的主要源代码文件。
• test/: 包含项目的测试文件。
• .gitignore: 指定Git版本控制系统忽略的文件和目录。
• .npmrc: 配置npm的行为。
• .travis.yml: 配置Travis CI的持续集成设置。
• LICENSE: 项目的许可证文件。
• README.md: 项目的说明文档。
• package.json: 项目的npm配置文件，包含依赖、脚本等信息。
• postcss.config.js: PostCSS的配置文件。

2. 项目的启动文件介绍

项目的启动文件位于src/index.js，这是PostCSS插件的主要入口点。该文件导出了一个函数，该函数接受PostCSS的配置并返回处理后的CSS。

// src/index.js
module.exports = (opts = {}) => {
  return {
    postcssPlugin: 'postcss-100vh-fix',
    Declaration(decl) {
      if (decl.prop === 'height' || decl.prop === 'min-height') {
        if (decl.value.includes('100vh')) {
          decl.value = decl.value.replace('100vh', '100vh /* fallback for missing vh unit support */');
        }
      }
    }
  }
}
module.exports.postcss = true

3. 项目的配置文件介绍

项目的配置文件是postcss.config.js，该文件定义了如何使用PostCSS插件。

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-100vh-fix')
  ]
}

在这个配置文件中，我们引入了postcss-100vh-fix插件，并将其添加到PostCSS的插件列表中。这样，当PostCSS处理CSS文件时，会自动应用这个插件来修复iOS上的100vh问题。

通过以上配置，你可以确保在你的项目中正确使用postcss-100vh-fix插件，从而避免在移动设备上出现视口高度问题。