本帖最后由 木缘 于 2024-6-20 15:14 编辑
爱星物联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
| 
