大屏看板适配方案

1.由来

  • 宏观角度：大屏看板要刚好占满屏幕，不能留有空白区域，也不能出现内容溢出，或者出现滚动条的情形
  • 微观角度：内容必须跟着屏幕分辨率的变化而变化，分辨率大的内容跟着大，分辨率小的内容跟着小

2.CSS自适应单位

  • CSS中的自适应单位有2种：vw/wh 和 rem
  • vw/wh：100vw当前视口宽度，优点是无需依赖js即可自适应屏幕大小，缺点是无法直接用其书写具体的样式大小(字体大小，边框大小，边距大小等)
  • rem：1rem为当前html元素的字体大小，优点相对于vw方便书写样式大小(字体大小，边框大小，边距大小等)，缺点是每次屏幕发生变化都依赖js进行初始化

3.自适应时机

  • 页面初始化时：必须做自适应（重要）
  • 页面开启全屏，切换全屏时：全屏切换一般只会影响页面高度，因为非全屏时，浏览器菜单栏，工具栏有占据一部分屏幕高度。这种高度的差异变化，会导致影响一些表格分页，或者echarts图表的展示，会有影响，但不会很大，做不做自适应看项目要求
  • 页面窗口化时：生产环境使用时，不会出现这种窗口化的情形，这种场景可以不考虑

4.px转vw

  • 鉴于vw的特性，可以在开发中使用px进行大小设置，在代码编译的过程使用工具自动将样式中的px转换为vw，只需要设定好转换规则即可
  • 安装 postcss-px-to-viewport
npm i postcss-px-to-viewport -D
  • 配置：在项目根目录创建文件 postcss.config.js ，写入以下内容
module.exports = {
    plugins: {
      "postcss-px-to-viewport": {
        viewportWidth: 3840, //视口的宽度，对应的时设计稿的宽度/2，一般为750
        viewportHeight: 2160, //视口的高度，对应的是设计稿的高度（也可以不配置）
        unitPrecision: 5, //指定‘px’转换为视口单位值的小数位数（很多时候无法整除）
        viewportUnit: 'vw', //指定需要转换成的视口单位，建议使用vw
        selectorBlankList: ['ignore', 'tab-bar'], //指定不需要转换的类
        minPixelValue: 1, //小于或等于‘1px’不转换为视口单位
        mediaQuery: false,//允许在媒体查询中转换为‘px’
        exclude:[/Tabbar/,/node_modules/]  //不需要转化的组件文件名正则，必须是正则表达式
      }
    }
}
  • 效果：符合转换规则的px将自动转换为vw，可以在生产环境中自动随着视口的大小变化而变化，从而做到自适应
posted @ 2024-09-26 16:41  ---空白---  阅读(18)  评论(0)  编辑  收藏  举报