0
点赞
收藏
分享

微信扫一扫

数据可视化项目


1. 数据可视化项目适配方案

数据可视化项目_html

首先将flexible.js导入进来,在其中调整我们需要将屏幕分的块数;
其次为盒子设置宽高的时候将像素调整为适配rem;最后导入媒体rem适配。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/flexible.js"></script>
<style>
/* // 实现rem适配 */
@media screen and (max-width: 1024px) {
html {
font-size: 42.66px !important;
}
}

@media screen and (min-width: 1920px) {
html {
font-size: 80px !important;
}
}

.box {
width: 2.5rem;
height: 2.5rem;
background-color: skyblue;
}
</style>
</head>

<body>
<div class="box"></div>
</body>

</html>

2. 项目开发

数据可视化项目_html_02

数据可视化项目_无缝滚动_03

2.1 边框图片切图原理

数据可视化项目_jquery_04

2.2 边框图片的使用语法

数据可视化项目_无缝滚动_05

数据可视化项目_html_06

实践案例助于了解

数据可视化项目_无缝滚动_07

3. 公共面板样式

数据可视化项目_类名_08

4. 通过类名调用字体图标

数据可视化项目_无缝滚动_09

数据可视化项目_无缝滚动_10

直接调用类名即可

无缝滚动原理

数据可视化项目_类名_11



举报

相关推荐

0 条评论