【适配窗口大小之基础容器、echarts图表和video】

学前端的小乐子

已于 2024-07-26 12:41:03 修改

阅读量613

点赞数 14

文章标签： echarts 前端 javascript

于 2024-03-14 15:09:08 首次发布

本文链接：https://blog.youkuaiyun.com/m0_75134766/article/details/136710124

版权

本文介绍了如何使用rem和flexible.js进行基础布局适配，包括设置字体大小、Echarts图表的resize函数应用以及视频元素的百分比和object-fit属性。重点强调了resize函数的使用前提和容器尺寸设置对于适配的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

适配窗口大小

一、基础适配方案：rem+flexible.js布局
二、echart图表适配
- 1.resize函数
- 2.使用resize的前提！重点！不然resize极有可能失效
三、video

一、基础适配方案：rem+flexible.js布局

vscode插件：cssrem
编写好的less文件保存后会自动生成相应的css文件
在这里插入图片描述

flexible.js下载地址 : https://github.com/amfe/lib-flexible
flexible.js默认会把屏幕分为10等份，1rem=（设计稿的长度/10）px
我们可以根据自己的需求去调整分成的份数是多少，在flexible.js文件中修改就行了
在这里插入图片描述
easy less插件默认1rem=80px,当我们根据自己的设计稿确定1rem=多少px后，不要忘记了在cssrem插件中点击扩展设置更改font-size的值

二、echart图表适配

1.resize函数

要实现echart图表适配需要使用到echarts提供的一个函数：resize()

  myChart.setOption(option, true);
  // 在实例化对象后，添加以下代码让图表自适应屏幕
  window.addEventListener("resize",function(){
    myChart.resize();
  })

2.使用resize的前提！重点！不然resize极有可能失效

容器的宽度使用百分比！高度要写vh!
再和resize函数一起使用

三、video

mp4文件的video容器可以使用css属性实现适配：

video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

100vw表示相对于视口宽度的百分比单位，100vh表示相对于视口高度的百分比单位，这样设置可以让video元素铺满整个屏幕。同时，object-fit: cover;属性可以保持视频比例不变并覆盖整个容器。