前端 - Taro vue微信小程序，使用px作为单位更换机型后没有自适应该怎么办呢？

Question

Taro官方文档中，推荐使用px作为尺寸单位，在我的项目中，使用px作为单位后，更换机型尺寸没有进行自适应，也就是说一个元素的高度设为297px，在所有机型中都是297px，即594rpx，这样的结果就是我以设计稿的iphone 6机型进行开发后，更换机型页面就会乱掉，以下是效果和 index.js 文件中的配置

const path = require("path");
const fs = require('fs')
const port = process.env.port || process.env.npm_config_port || 80 // 端口

const config = {
  projectName: 'jjtc-applet',
  date: '2021-9-11',
  designWidth: 375,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1
  },
  sourceRoot: 'src',
  outputRoot: 'dist/' + process.env.TARO_ENV,
  plugins: ['@tarojs/plugin-html'],
  defineConstants: {
  },
  alias: {
    // '@': path.resolve(__dirname, '..', 'src/')
    '@/api': path.resolve(__dirname, '..', 'src/api'),
    '@/components': path.resolve(__dirname, '..', 'src/components'),
    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
  },
  copy: {
    options: {
    },
    patterns: [
      { from: 'src/img/', to: 'dist/'+process.env.TARO_ENV+'/img/', ignore: ['*.js'] }, // 指定需要 copy 的目录
    ]
  },
  framework: 'vue3',
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {
          onePxTransform: true,
          unitPrecision: 5,
          propList: ['*'],
          selectorBlackList: [],
          replace: true,
          mediaQuery: false,
          minPixelValue: 0
        }
      },
      url: {
        enable: true,
        config: {
          limit: 1024 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  h5: {
    publicPath: './',
    staticDirectory: 'static',
    devServer: {
      host: '0.0.0.0',
      port: port,
      open: true,
      proxy: {
        // detail: https://cli.vuejs.org/config/#devserver-proxy
        [process.env.VUE_APP_BASE_API]: {
          target: process.env.VUE_APP_SERVER_URL,
          changeOrigin: true,
          pathRewrite: {
            ['^' + process.env.VUE_APP_BASE_API]: ''
          }
        }
        // "/dev-api": {
        //   target: 'http://192.168.1.66:8080/',
        //   changeOrigin: true,
        //   pathRewrite: {
        //     '^/dev-api': ''
        //   }
        // }
      },
      disableHostCheck: true
    },
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
          onePxTransform: true,
          unitPrecision: 5,
          propList: ['*'],
          selectorBlackList: [],
          replace: true,
          mediaQuery: false,
          minPixelValue: 0,
          baseFontSize: 20,
          maxRootSize: 40,
          minRootSize: 20
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  if (process.env.NODE_ENV === 'production') {
    return merge({}, config, require('./prod'))
  }
  switch (process.env.NODE_ENV) {
    case 'development':
      return merge({}, config, require('./dev'));
    case 'production':
      return merge({}, config, require('./prod'));
    default:{
      console.log(path.resolve(__dirname, process.env.NODE_ENV + '.js'))
      if(fs.existsSync(path.resolve(__dirname, process.env.NODE_ENV + '.js'))) {
        return merge({}, config, require('./' + process.env.NODE_ENV))
      }
      console.error("配置环境变量NODE_ENV错误，使用development配置代替")
      return merge({}, config, require('./dev'));
    }
  }
}

Answer 1

高度是固定的，不会转化成自适应的形式。

Answer 2

因为 iPhone X 的屏幕宽度也是 375px 呀…… 只是说屏幕高度会高一些。

如果你是想要铺满屏幕的可以考虑使用 vh 或者 calc() 来处理