1. 数据可视化项目适配方案
首先将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. 项目开发
2.1 边框图片切图原理
2.2 边框图片的使用语法
实践案例助于了解
3. 公共面板样式
4. 通过类名调用字体图标
直接调用类名即可
无缝滚动原理