Y.moon
0%

发表于 更新于

屏幕兼容处理与移动端兼容|可视化大屏

  • 自适应 与 响应式布局的区别 –通过js实现
  • 关于移动端开发的兼容方案
  • 关于大屏幕开发的兼容方案

1.自适应 与响应式布局

自适应： 通过css方式，能够达到：不同设备显示相同效果

​ 优点： 只需要写一套css 缺点： 网页中文字只能缩小到12px 继续缩小也没有效果了，盒子内容溢出 导致页面混乱。 现在谷歌支持小于12px, 文字太小，用户看不到

响应式 ：通过 css 监听或控制页面 根据 不同设备显示不同效果

​ 优点：不同设备 的 样式显示比较好看 缺点：需要多套css样式

2.移动端兼容方法

2.1 流式布局 -【自适应】

所有盒子的宽 高间距 尽量使用 百分比 文字大小都用百分比

1
2
3
4
5
6
7
8
9
.box{
    width:100%;
	height:100%;  //父盒子先用具体高度
}
.box1{
    width:50%;
    height:40%;
    fontsize:100%;  
}

2.2 自适应方案 2： rem em rpx

动态html body 的fontsize 实现rem单位自动 缩放

根据屏幕宽高 动态计算 html body 标签的字体大小，所有盒子 高 宽 字体大小 间距 都是用rem 单位

使用场景：

屏幕大小变动不大，推荐：只做 移动端兼容 ，或 只做pc兼容，

同时兼容横屏 竖屏 不推荐这种方式

  • 自适应方案3： rpx

原理： 1px ==2rpx 基准屏幕宽度为375px

​ 1px ==1rpx 当前屏幕为750px

1
2
3
4
.box{
    width:10rpx;         //如果是375屏幕      5px       屏幕：750  ===>10px
    hegiht:10rpx;        
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const resize =()=>{
           console.log('resize，屏幕发生了改变');
           // 获取当前的屏幕宽高
           let width = document.documentElement.clientWidth;
           // 屏幕基准值: 你当前屏幕 相对之前写死的值 是放大了 还是缩小了
           //    800px  ===>  10px      推算： 1000px===>12px     公式： 当前屏幕宽度/基准宽度 *盒子原宽度
           //   1920px 屏幕基准值  ==> 72px*72px   10000px  ==>  10000/1920 *72 ==375px *375px
           
           let fs = width/375*10
           console.log(fs);
           document.documentElement.style.fontSize = fs + 'px'
       }
       resize()
       
       
       window.addEventListener('resize',resize)

rem：相对页面根节点的 fontsize 的 相对单位

​ 例：【谷歌浏览器 html生效】 html body fontsize ==20px 1rem ==20px

em: 1个字体单位 父盒子的fontsize 大小

​ 例如： 父盒子的fontsize = 30px 1em ==30px

rpx ：就是微信小程序官方 提供的 rem 的进阶版

问题： 流式布局 解决了 盒子宽高 间距 根据屏幕大小自动变化的问题，但没有解决字体大小变化的问题

  • 通过 设置 html ，body标签的fontsize 实现rem的字体的相对单位
  • 因为html body 固定的fangsize 导致 rem 也变成了固定值
  • html body的 fontsize 跟随 屏幕的宽高 变化 而进行变化【必须使用js 监听屏幕宽高改变】

2.3 方案3 ： 利用淘宝的 flexible.js 实现方案2的效果

2.4 方案4： 基于 前端工程化项目的插件 postcss-px2rem 实现方案2的效果

1
2
3
https://blog.csdn.net/qq_54527592/article/details/120249040
 vite 配置postcss  
 taro vite 配置postcss
  • 项目安装 postcss-px2rem
1
pnpm install  postcss-px2rem  amfe-flexible
  • 配置vite
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// vite.config.js 或 vite.config.ts
import { defineConfig } from 'vite';
import px2rem from 'postcss-px2rem';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        px2rem({
          // 配置 px2rem 的选项
          rootValue: 37.5, // 设计稿宽度 / 10，例如设计稿为 375px 则设置为 37.5
          unitPrecision: 5, // px 转换成 rem 的小数位数
          propList: ['*'], // 需要进行转换的属性，'*' 表示全部属性
          selectorBlackList: [], // 需要忽略选择器的转换的正则表达式
          replace: true, // 是否替换原有的 px
          mediaQuery: false, // 是否允许在媒体查询中转换 px
          minPixelValue: 0 // 小于或等于 minPixelValue 的 px 不进行转换
        })
      ]
    }
  }
});
  • main.jsx
1
2
3
4
5
6
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import 'amfe-flexible'   //导入 插件 根据插件 实现 根据屏幕动态更改 html的fontsize  
import './index.css'
import App from './App.jsx'

3.响应式布局

不同的设备 显示不同的效果（存在多套的css ）

3.1 媒体查询 –css解决方案-【掌握 记住语法 常见屏幕高宽】

优点：所有兼容处理方案 中 最完美的，可以按照 不同的屏幕宽度 加载不同的css样式

缺点： 一套样式需要重复写多次

通过css 实现判断 当前的屏幕 需要使用 那一套 样式

常见屏幕高宽:

移动端不要超过

iphone 5 320

ihone 6-8 375

ihone678s XR 414

iphone 12 390

iphone 14 430

ipad 768 700-800

pc： 1080 1920 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/* 写一套默认样式 */
      .menu{
          width: 100%;
          height: 60px;
          border-bottom: 1px solid #ccc;
          display: flex;
          justify-content: space-between;
      }
      .icon{
          width: 50px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          display: none;
      }
      .title{
          width: 200px;
          height: 60px;
          line-height: 60px;
      }
      .list{
          display: flex;
      }
      .item{
          width: 80px;
          height: 60px;
          line-height: 60px;

      }

      /* 监听当前屏幕 的宽度 属性哪个范围 加载对应的css,对应css可以覆盖默认的样式 */
      /* 写的越多套  不同屏幕的样式   */
          /* 移动端  320以上 */
       @media screen and (min-width:320px) {
          .list{
              display: none;
          }
          .icon{
              display: block;
          }
       }   

        /* 平板 */
       @media screen and (min-width:700px) and (max-width:900px) {
           .list{
              display: block;
          }
          .icon{
              background: #f44;
              display: block;
          }
       }


       /* pc */

       @media screen and (min-width:900px){

       }

案例：

pc上 盒子的高宽 400*450 背景色 为 #f44

平板 盒子高宽 200*260 背景色位 blue

iphone6/7/8 盒子高宽 120*140 背景色 skyblue 外边距 20px

iphone 12-14 盒子高宽 140*170 背景色为白色 外边框为1px的green 线条 内边距为10px

3.2 Ui框架实现响应式布局的方案

  • elemnt plus
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<el-row :gutter="10">
   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
     <div class="grid-content ep-bg-purple" />
   </el-col>
   <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
     <div class="grid-content ep-bg-purple-light" />
   </el-col>
   <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
     <div class="grid-content ep-bg-purple" />
   </el-col>
   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
     <div class="grid-content ep-bg-purple-light" />
   </el-col>
 </el-row>
  • antd
1
2
3
4
5
6
7
8
9
10
11
<Row>
   <Col xs={2} sm={4} md={6} lg={8} xl={10}>
     Col
   </Col>
   <Col xs={20} sm={16} md={12} lg={8} xl={4}>
     Col
   </Col>
   <Col xs={2} sm={4} md={6} lg={8} xl={10}>
     Col
   </Col>
 </Row>

4.特殊处理： 专门做大屏的 整个缩放

transform:scale(缩放倍数)

假设 不清楚 甲方的 大屏幕 到底是多大

按照设计图进行 px 直接写，写完样式之后 进行 自适应 transform 缩放布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 基准值  1920*1080   x y  ==1
  //通过js 获取屏幕的宽高 当前宽/1920 = 2

  const resize = ()=>{
      console.log('111');
      
      // 获取屏幕宽度
      let width = document.documentElement.clientWidth;
         let h = document.documentElement.clientHeight;
      let x = width/1920;
      let y = h/1080
      // 可以根据屏幕缩放的比例 进行整个页面的缩放
       document.documentElement.style.transform = `scale(${x},${y})`
      //  缩放之后需要调整缩放的位置  有偏移量
      document.documentElement.style.transformOrigin = '50% 50%'
       
  }
  resize()
  window.addEventListener('resize',resize)

5.datav 可视化大屏框架-【推荐】

官网地址：http://datav-react.jiaminghi.com/

面试题

  • 浏览器的字体大小 默认字体大小：16px 最小字体大小：12px-【如果小于12px 必须使用缩放 transform:scale zoom, 现在浏览器已经支持 最小字体可以小于12px】

  • 自适应的方案：

    • 根据屏幕宽高 动态计算 html body 标签的字体大小，所有盒子 高 宽 字体大小 间距 都是用rem 单位