VUE+Echart大屏展示

1、基础知识

1.1、自适应和响应式

共同点：两者都是因为越来越多的移动设备（ mobile, tablet device ）加入到互联网中来而出现的为移动设备提供更好的体验的技术。用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕.都是为了解决同一张页面在不同设备分辨率上合理展示的技术。

不同点：

响应式布局：不管用户使用的是什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行侦测屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化，所以是主动的。同一页面在不同大小设备可能呈现不一样的页面效果

自适应：不同大小设备呈现同样的页面效果，只是文字、图片等的大小不一样，但是相对位置一样。即在不同大小设备看起来一样

1.2、css单位rem,em区别

rem,em都是顺应不同网页字体大小展现而产生的

em是相对其父元素，在实际应用中相对而言会带来很多不便

rem是始终相对于html大小，即页面根元素

<html>
<head>
<tit></tit>
<style type="text/css">
html{
   font-size: 10px;
}
.content{
   font-size: 1.5rem;
　　//font-size: 1.5em;
}
.content p{
   font-size: 1rem;      //如果使用rem,p文字font-size:1*10px=10px
　　//font-size: 1em;        //如果使用em,p文字font-size: 1*1.5*10px=15px,因为其父元素是.content,所以要以父元素1.5em(1.5*10px)为准
}
</style>
</head>
<body>
<div class="content">
<p>测试文字</p>
</div>
</body>
</html>

2、正式开发

2.1、产品需求

一个基于 vue、datav、Echart框架的大屏展示项目

项目需要实现的基本功能

1、需要全屏展示(按F11)

2、需要兼容多个浏览器

3、需要兼容多台设备

2.2、项目开发环境

vue-cli-3.0、webpack-4.0、npm-6.13

 

2.3、基本代码

一个基于 vue、datav、Echart框架的大屏展示项目项目需要实现的基本功能1、需要全屏展示(按F11)2、需要兼容多个浏览器3、需要兼容多台设备
项目开发环境：vue-cli-3.0、webpack-4.0、npm-6.13

posted @ 2020-07-10 10:24  前端小沫  阅读(206)  评论(0)  编辑  收藏  举报