爱星物联H5屏幕自适应

[复制链接]
查看893 | 回复4 | 2024-6-20 15:14:50 | 显示全部楼层 |阅读模式
本帖最后由 木缘 于 2024-6-20 15:14 编辑

爱星物联H5屏幕自适应

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

1. 效果展示      
爱星物联APP首页在不同尺寸手机下的效果,可以看到自适应后的效果基本是一致的。
图片1.png 图片2.png 图片3.png
     

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的基准值。
· unitPrecisionrem的小数位数。
· propList:需要转换的属性列表,['*']表示所有属性都会被转换。
· selectorBlackList:需要忽略的选择器,可以是正则表达式或字符串。
· replace:是否替换原始值。
· mediaQuery:是否在媒体查询中转换px。
· minPixelValue:小于或等于该值的像素单位不被转换。

3) 配置好后运行项目发现px全部转成了rem
图片4.png

回复

使用道具 举报

1084504793 | 2024-6-20 15:50:03 | 显示全部楼层
回复

使用道具 举报

hdydy | 2024-6-20 23:36:28 | 显示全部楼层
点赞
回复

使用道具 举报

WT_0213 | 2024-6-21 08:41:46 | 显示全部楼层
点赞
回复

使用道具 举报

xktx09 | 2024-6-24 03:11:53 | 显示全部楼层
不错
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则