爱星物联H5屏幕自适应

爱星物联H5屏幕自适应

为了适应不同屏幕尺寸和设备像素密度，前端开发者们经常需要使用相对单位，例如rem（root em）而非固定单位像素。然而，手动转换单位可能是一项繁琐的任务，而PostCSS插件——postcss-pxtorem的出现为我们提供了一种更加智能和高效的解决方案。爱星物联H5使用postcss-pxtorem作为移动端自适应适配，具体使用下面将详细介绍

1. 效果展示      

爱星物联APP首页在不同尺寸手机下的效果，可以看到自适应后的效果基本是一致的。

     

2. 使用postcss-pxtorem

postcss-pxtorem是PostCSS的一个插件，它的主要功能是将CSS中的像素单位(px)转换为rem。rem是相对于根元素(html)的字体大小的单位，这使得在不同屏幕上，元素的尺寸能够更好地适应。postcss-pxtorem的工作原理是遍历CSS AST（抽象语法树），找到所有的像素单位，并根据配置选项进行相应的转换。

1)在开始使用postcss-pxtorem之前，首先需要通过npm安装它。在项目根目录下执行以下命令：npm install postcss-pxtorem --save-dev

2) 在项目下配置postcss.config.js

module.exports = {

  plugins: {

    autoprefixer: {

      overrideBrowserslist: [

        'Android >= 4.0',

        'iOS >= 7',

        'Chrome > 31',

        'ff > 31',

        'ie >= 8'

      ],

      grid: true

    },

    'postcss-pxtorem': {

      rootValue: 37.5,

      propList: [ '*','!font-size' ],

      selectorBlackList: ['pxtovh'],

    },

    'postcss-px-to-viewport': {

      viewportWidth: 812,

      propList: [ "*",'!font-size'],

      fontViewportUnit: 'vh',

      viewportUnit: 'vh',

    },

  }

}

在这个配置中，我们主要关注几个核心选项：

· rootValue：根元素字体大小，用于将像素转换为rem的基准值。

· unitPrecision：rem的小数位数。

· propList：需要转换的属性列表，['*']表示所有属性都会被转换。

· selectorBlackList：需要忽略的选择器，可以是正则表达式或字符串。

· replace：是否替换原始值。

· mediaQuery：是否在媒体查询中转换px。

· minPixelValue：小于或等于该值的像素单位不被转换。

3) 配置好后运行项目发现px全部转成了rem

赞

点赞