数据可视化项目

笔记内容为 JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教学 教学课程的整理

适配方案

• flexible.js 用来检测浏览器宽度，修改 html 文字大小
• rem 单位 页面元素根据 rem 适配大小，配合 cssrem 插件
• flex 布局 页面快速布局

REM 适配

1. 设计稿是 1920px

2. PC 端适配：宽度在 1024-1920 之间页面元素宽高自适应

   1. flexible.js 把屏幕分为 24 等份

   

   2. cssrem 插件的基准值是 80px（1920/24=80）
      • 插件-配置按钮-配置扩展设置-Root Font Size 里面设置
      • 重启 vscode 软件保证生效，现在即可自动提示 rem 的值

   

   

   

   3. 要把屏幕宽度约束在 1024-1920 之间有适配，实现代码：

   // 实现 rem 适配
   @media screen and (max-width: 1024px) {
       html {
           font-size: 42.66 !important; // 1024/24=42.66
       }
   }
   
   @media screen and (min-width: 1920px) {
       html {
           font-size: 80px !important; // 1920/24=80
       }
   }
   

边框图片

1. 边框图片的使用场景

当盒子大小不一，但是 边框样式相同，此时就需要边框图片来完成。

例如：下面是一个大屏展示的例子，中间的每个小格子，虽然大小不同，但是四个边框的形式都是一样的，这种就是采用边框图片来制作的。

为了实现丰富多彩的边框效果，在 css3 中，新增了 border-image 属性，这个新属性允许指定一幅图像作为元素的边框。

2. 边框图片的切图原理

原理：把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕

注意，按照 上右下左 顺序切割

3. 边框图片语法规范

大屏无缝滚动

无缝滚动原理

1. 先克隆 marquee 里面所有的行（row）

2. 通过 CSS3 动画滚动 marquee

3. 鼠标经过 marquee 就停止动画

animation-play-state: paused;