【finereport普通报表的移动端自适应方案】的更多相关文章

finereport普通报表的移动端自适应方案

移动端报表呈现,首先要求的是页面随手机屏幕大小自动放缩(自适应),下面给出一个普通报表中的finereport移动端自适应方案,适用于finereport 7.1之前的版本. 首先,了解一下当前我们可以做到的自适应效果: 当前,用FIneReport按某一尺寸做好的报表,如果在屏幕像素较大的手机上打开,我们可以做到自动放大,但是我们当前最多只能放大两倍.所以,在制作移动端报表时,尺寸要有所取舍了. 之前给一个客户做过移动端报表,实现了在iphone4.小米.华为P6.三星S4等手机上自适应的效果…

有了这套flexible.js 移动端自适应方案，你就能在移动端的来去自如， (*^__^*)

flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档. (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,f…

flexible.js 移动端自适应方案

一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档. (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js" >…

pc端自适应方案

一.常见处理方式 定宽 电商类.内容为主的网站几乎采用这种方式 1.网易考拉.京东(1190px) 2.知乎(1000px),果壳(1000px),网易新闻(1200px) 媒体查询+定宽 图片类.简单布局.在达到某个断点之后更改内容区的宽度,并把某个内容显示/隐藏 1.花瓣网 @media screen and (min-width: 1529px)版心为1500px @media screen and (min-width: 1276px) and (max-width: 1528px)版心…

vue中移动端自适应方案

安装 lib-flexible 1.npm i lib-flexible 2.在项目入口文件 main.js 里 引入 lib-flexible import ‘lib-flexible’ 3.添加meta标签  <meta name="viewport" content="width=device-width, initial-scale=1.0"> px 转 rem:安装px2rem-loader 1.npm i px2rem-loade 2.配置b…

vue+vue-cli+淘宝lib-flexible做移动端自适应

总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价main.js中引用flexible import 'lib-flexible' 3.由于在开发中rem和px手动转换比较麻烦,所以建议安装px2rem这个工具 3.1安装px2rem工具 npm install px2rem-loader --save-dev 3.2在vue-cli生成的文件中,找到…

原生js移动端字体自适应方案

自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWi…

FineReport关于tomcat集群部署的方案

多台服务器集群后,配置权限.数据连接.模板.定时调度等,只能每台服务器一个个配置,不会自动同步到所有服务器. 针对上述情况,在FineReport中提供新集群部署插件,将xml配置文件.finedb/logdb数据(定时任务.报表目录管理.批量导入.统计信息)的修改都对主机生效.其他辅机的信息读取也都从主机读取,保证了数据同步. 实现了灾备,即主机当即后,次主机会上位接替主机的工作,保证系统正常运作. 同时还增加了集群灾备之文件同步,会将主机的finedb.xml.模板.jar包.插件等等备份到…

【转载】rem自适应布局-移动端自适应必备

原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不用再为各种设备宽度不同而烦恼如何实现自适应的问题. rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.1rem=16px(浏览器html的像素,可以设定这个基准值),假如浏览器的html设为64px,则下面的元素则1rem=64px来运算.…

如何通过 WebP 自适应方案减少图片资源大小

前言 我们知道,理想的网页应该在 1 秒内打开,而在页面的整体大小中,图片往往是所占比例最大的一部分(大约占到 60% 以上,更多了解请点击),也可以参照如下图所示.优化图片不仅可以加快页面显示,还能降低移动网络的流量费用.原图产生的 PNG.JPEG.GIF 和 SVG 图片一般都有很大的压缩余地.下文将重点介绍一款图片新格式:WebP,从而揭开它神秘的面纱. 解决方案:使用 WebP 优化图像 1.什么是 WebP ? WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式…