WebPage-postcss-px-to-viewport前端适配

1.前言

postcss-px-to-viewport是用于将像素单位(px)转换为视口单位（vw vh vmin vmax）的PostCss插件。创建在不同显示设备上具有响应式的web界面。

2.安装与配置

使用npm进行安装

css 复制代码

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

在项目根目录下创建配置文件postcss.config.js

javascript 复制代码

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 需要转换的单位，默认为"px"
      viewportWidth: 1920, // 设计稿的视口宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ['*'], // 能转化为vw的属性列表
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
      replace: true, //  是否直接更换属性值，而不添加备用属性
      exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: 'vw', // 横屏时使用的单位
      landscapeWidth: 1920 // 横屏时使用的视口宽度
    }
  }
}

3.实际项目

仅做参考宽高设定尽量使用calc计算后按照ui进行设定间距与宽高，主要应用场景：可视化大屏，多端适配转换.

html 复制代码

<template>
  <div class="management-body">
    <el-divider />
    <div class="search">
        <el-input
          class="input"
          placeholder="请输入姓名关键词查询"
          clearable
        />

      <div class="btn-container">
        <div
          class="common-system-btn"
        >
        <img src="#" alt="" class="eidt-icon">
          新建
        </div>
        
      </div>
    </div>

    <!-- 表格 -->
    <div class="list-table">
      
    </div>
  </div>
</template>

<script setup lang="tsx">

</script>

<style lang="scss" scoped>

$spacing-md: vh(12);

@function vh($px) {
  @return calc($px / 1080) * 100vh;
}

@mixin text-style($size, $family: var(--el-font-family-normal), $color: var(--el-text-color-primary)) {
  font-family: $family;
  font-size: $size;
  color: $color;
}

.common-system-btn {
  @include panel;

  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: vh(32);
  line-height: vh(32);
  text-align: center;
  cursor: pointer;
  border: 1px solid #409eff !important;

  @include text-style(var(--font-14), var(--el-font-family-regular), #fff);

  &.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
  }

  &:hover {
    color: #fff;
    background-color: rgb(79 172 254 / 20%);
    border-color: #4facfe;
  }

  .eidt-icon {
    height: vh(14);
    margin-right: 4px;
  }
}

.management-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.search {
  display: flex;
  justify-content: space-between;
  margin-bottom: $spacing-md;

  .btn-container {
    display: flex;
  }
}

:deep(.flood__select) {
  width: 150px;
  margin-right: $spacing-md;
}

.input {
  height: vh(32);

  :deep(.el-input__icon) {
    margin-top: vh(3);
  }
}

.list-table {
  height: vh(560);
}
</style>