zoukankan      html  css  js  c++  java
  • 前端大屏页面布局经验

    前端大屏页面布局经验

    额··· 其实谈不上经验,只能说是开发过程中值得记录一下的东西,不一定是对的。

    分辨率

    首先一点,大屏对分辨率和显示器是有要求的,因为他不像一般的页面,出个纵向的滚动条啥的无所谓,不是特殊情况下,大屏是不能出现滚动条的,所以其实不是随便一台电脑,随便一个分别率都可以使用大屏的,目前一般的分别率是 19201080100%的,但是具体得根据设计师设计图决定,还有,大屏是一般是全屏效果,就是F11电脑全屏,不加上浏览器上不标签栏、地址栏和书签栏的区域。

    Echarts

    再一个,大屏开发过程中就会发现,百分之九十的大屏页面都是展示数据报表,就是各种Echarts柱形图、折线图、雷达图的展示,所以说对于Echarts的使用就得稍微熟练一点,因为大部分的大屏设计师不会把页面设计的就是echarts官网示例一样的简陋样式,需要开发者根据echarts的配置手册,尽可能的调试成设计师设计的样式,配置手册东西超级多,这个步骤需要花费大部分时间,碰到难一点的,一个echarts调半天也是可能的,好在弄得多了,有些地方就记住了,后来也就慢慢的快了。如果没有做过或者是接触过,一时间很难找到该使用哪个属性配置样式,这个时候就不要瞎找了,抓紧时间百度,形容一下想要的样子,就很容易找到,要相信,像我们这种初学者很多,肯定又问在网上提问的人也很多,但是百度到的大部分不可能和我们需要的一模一样,不要上来就骂,根据别人的资料,修改成自己需要的,也是一种能力。

    布局

    第三一个,布局。这个是大屏开发中最烦的事情,尽管是根据固定的分辨率开发调试,但是毕竟实际情况可能根据电脑不同需要稍微的适配,保证在近似的分辨率下展示效果是正常的,不至于很错版。

    在开发的时候建议哈,仅仅是建议,建议使用弹性布局、使用百分比设置宽高之类的属性值,尽可能的减少px的使用,因为像素不一样,px的大小也不一样,极容易出现错版的问题,但是可以使用rem、em之类的,推荐rem。

    还有一点,我们在开发大屏的时候如果用到echarts,它里面的一些东西比如说字体大小设置的数值就是px,默认就是px,这个就不太好搞,我们需要定义一个方法,然后把px转成rem对应的值,效果会好一些,这些代码不需要自己写,网上百度就可以,案例有很多,只要看得懂,会用就行,当然用了之后研究一下更好,不过话又说回来,能用起来其实已经会了。

    模块化

    因为我是用vue开发的大屏,模块化是必不可少的,不要在一个文件里面填充太多的东西,我们可以把每一小部分单独拆出来,封装好,然后引用到对应的位置,不要把一个页面填充到上千行,不方便阅读,也不容易维护,那句话怎么说的来着,“我写的代码,只有我和浏览器能看懂,但是一星期以后,只有浏览器能看懂。” 不要出现这么尴尬的局面,该加注释的地方加注释,文件命名易懂又好区分。模块化之后第一个原因是方便维护,第二一个原因是可以组件复用,比如说echarts,页面上有好多相同的柱形图,一摸一样,只是渲染的数据不一样,那就可以封装一个柱形图组件,组件复用就可以,就是类似的道理。

    样式

    样式的话很简单,尽可能的减少内联样式,不要直接写在标签里面,那样多了的话,会疯!可以抽成一个文件,如果页面多了,样式有近乎相同,那就可以样式复用。样式不要乱,管理好,具体使用什么样的写法,根据自己的兴趣来,自己觉得好就可以,但是不要因为省事就不管后期维护和修改了。

    插件和文档分项

    在这里总结一下做大屏可能会用到的一些资料吧,不知道会不会用到,也不确定是不是就是最好的,记录一下,希望有用。

    Echart官网

    Echart配置项地址e

    Echarts示例地址

    个性化图表

    Element组件库

    Ant-d 组件库

    Vue 大屏数据展示组件库 Data-V

    Flex 布局

    阿里巴巴矢量图

    基于vue.js的无缝滚动插件

    Vue 大屏开发自适应 VScode | flexible.js | rem | echarts自适配

    vue 全局实现数字千位分隔符格式

    vue 使用 video.js 播放 m3u8 视频流

    常用的几种echart报表整理

    【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处!
    【重要说明】本文为本菜鸟的学习记录,论点和观点仅代表个人不代表此技术的真理,目的是学习和可能成为向别人分享的经验,因此有错误会虚心接受改正,但不代表此时博文无误!
    【博客园地址】JayveeWong: http://www.cnblogs.com/wjw1014
    【CSDN地址】JayveeWong: https://blog.csdn.net/weixin_42776111
    【Gitee地址】Jayvee:https://gitee.com/wjw1014
    【GitHub地址】Jayvee:https://github.com/wjw1014
  • 相关阅读:
    10.异常
    9.1 oop习题集合
    9.抽象类和接口
    8.oop-多态
    AngularJs学习笔记二
    浅谈如何坚持计划
    妙味课堂——JavaScript基础课程笔记
    前端学习-试卷
    jquery实战
    boost any
  • 原文地址:https://www.cnblogs.com/wjw1014/p/15397071.html
Copyright © 2011-2022 走看看