H5屏幕适配

 H5屏幕适配

H5屏幕适配是指根据不同设备的屏幕尺寸和分辨率，调整网页的布局和样式，以确保网页在不同设备上显示效果一致。在移动端开发中，常用的适配方案有使用vw/vh单位和使用rem单位。 

1. 使用vw/vh单位：
   Vant默认使用px作为样式单位，如果需要使用viewport单位（vw, vh, vmin, vmax），可以使用postcss-px-to-viewport插件进行转换。配置如下：                                     

   // postcss.config.js
   module.exports = {
     plugins: {
       'postcss-px-to-viewport': {
         viewportWidth: 375,
       },
     },
   };

2. 使用rem单位：如果需要使用rem单位进行适配，推荐使用postcss-pxtorem插件和lib-flexible库。配置如下：                                   

   // postcss.config.js
   module.exports = {
     plugins: {
       'postcss-pxtorem': {
         rootValue: 37.5,
         propList: ['*'],
       },
     },
   };

 如果设计稿的尺寸不是375，而是750或其他大小，可以将rootValue配置调整为相应的值。例如：

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

总结

当我们在移动端开发中，需要确保网页在不同设备上的显示效果一致，就需要进行H5屏幕适配。下面对使用vw/vh单位和使用rem单位进行适配进行详细解读。

1. 使用vw/vh单位适配：

   • 首先，Vant默认使用px作为样式单位，但是我们希望使用viewport单位（vw, vh, vmin, vmax）进行适配。
   • 我们可以使用postcss-px-to-viewport插件，将px单位转换为viewport单位。
   • 在postcss.config.js配置文件中，引入postcss-px-to-viewport插件，并设置viewportWidth属性为375（这里的375是设计稿的宽度）。
   • 当编译样式时，插件会自动将样式中的px单位转换为相应的viewport单位，从而实现屏幕适配。

2. 使用rem单位适配：

   • 首先，我们需要将px单位转换为rem单位，并设置rem的基准值。
   • 推荐使用postcss-pxtorem插件和lib-flexible库进行适配。
   • 在postcss.config.js配置文件中，引入postcss-pxtorem插件，设置rootValue为37.5（这里的37.5是根据设计稿宽度375计算得到的）。
   • propList属性设置为['*']，表示转换所有属性的px单位为rem单位。
   • 同时，需要引入lib-flexible库，它会根据屏幕的宽度动态设置html的font-size值，从而实现屏幕适配。
   • 当编译样式时，插件会自动将样式中的px单位转换为相应的rem单位，而lib-flexible库则会动态设置html的font-size值。

如果设计稿的尺寸不是375，而是750或其他大小，我们需要相应调整rootValue的值来保持适配效果。可以根据具体情况在postcss.config.js文件中进行配置。