一些PC端项目屏幕适配的案例

屏幕窗口适配是前端开发常见问题，每次新项目需求调研都绕不开讨论用什么适配方案，下面是我的遇到过的场景，总结出来适配方案

常见的场景：

1. 后台管理页面
2. 需要一屏展示的页面(不出横向、竖向滚动条)
3. 后台管理的弹框
4. 类似企业站的项目

1.后台管理

如无特殊页面，字体大小，margin，padding值，小块体的width，height全部按照UI图写px单位，无需转换单位 ，左侧导航栏宽度按照UI图固定，右侧部分宽度flex:1自适应，可用flex布局解决大部分布局问题。

2.需要一屏展示页面

需要一屏展示的页面，可利用插件postcsspxtoviewport自定义一个单位来转成px，在需要转换vw的地方使用自定义的单位即可，字体大小还是按照px写死，页面整体的min-width可以根据需求给定一个值，超过这个值那只能出现滚动条了，这种页面为保证布局不乱缩放太小可出横向滚动条。

例如 Vite 项目中使用 postcss-px-to-viewport 插件：

第一步：安装依赖

npm install postcss-px-to-viewport postcss --save-dev

第二步：在项目根目录下创建一个 postcss.config.js 文件，并进行相应的配置。

注：我们PC端项目UI是按照1440*900的尺寸出图的

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 1440,
      unitPrecision: 5,
      viewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false
    }
  }
}

第三步：在 Vite 配置中使用 PostCSS 插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        require('postcss-px-to-viewport')
      ]
    }
  }
})

最后：在css中使用

.box {
  width: 100px;
  font-size: 16px;
}

在CSS 代码中，我们可以继续使用像素单位（px）编写。postcss-px-to-viewport 插件会自动将其转换为视口单位，高度的话用vh来适配。

3.后台管理类的弹框

弹框宽度按照UI图写死px，里面的输入框长度也根据UI图写死px，因为后台管理类使用场景变化不大，稍微大一点小一点没区别。

4.企业网站类的项目

整体宽度100%，中间部分按照UI图宽度写死px， flex布局居中，页面给定min-width，通常与中间宽度相同，浏览器尺寸缩放小于此尺寸出横向滚动条。

如果想要根据不同的分辨率，来更改样式，可以用媒体查询来引入不同的css样式表，就不过多赘述了。

最后，适配方案还是得根据公司项目的要求来改，以上是我遇到过pc端的常见适配方案。