html body scale 大屏自适应

2024-10-22

HTML5----响应式（自适应）网页设计（自动适应屏幕大小）

HTML5----响应式(自适应)网页设计(自动适应屏幕大小) 现在,很多项目都需要做响应式或者自适应的来适应我们不同屏幕尺寸的手机,电脑等设备,那么就需要我们在页面上下功夫,但移动端的布局不同于pc端,首先我们要知道在移动端中,css中的1px并不等于物理上的1px,因为手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,那就意味着一个物理像素点实际上塞入了好几个像素.下面我就来说一下如何做响应式(自适应)的网页设计 1.在网页代码的头部,加入一行viewport元标签在网页

使用rem配置PC端自适应大屏

效果如下使得大屏不论在什么宽高比例依然能展示全部数据安装 npm install -S postcss-pxtorem rem配置思路原先的rem函数是能解决大部分的问题的,如果展示不全,也可以用滚动条. 但是大屏展示又不能使用滚动条,又必须展示全部的内容,这个时候就需要改变原来的计算方式,需要根据屏幕的实际高度来计算对应的屏幕宽度 1. 配置rem.js文件 rem.js可以放在src文件夹下,我是放在src下的utils文件夹中初始的rem配置 // 设置 rem 函数 functi

NGUI 屏幕自适应大屏与小屏（初始设定宽高为1280x720，能适应比其小或者更大的屏）

具体细节可以参考另外一篇随笔! 以下提供的算法完成的事: 1.自适应1280x720分辨率以下的屏幕 2.自适应1280x720分辨率以上的屏幕在我设定的要求内包括的分辨率大部分都测过了,背景图.全屏透明Sprite(主要用于九宫格区域的控件摆放)自适应都没问题(不会变形),其他的控件当然是由UIRoot组件搞定的!下面的算法主要就是说明背景.全屏透明Sprite的自适应! 之前的随笔已经说过实际屏幕比设定屏幕大的自适应,现在加入自适应比设定屏幕小的算法! detail: 使用NGUI版本为3

vue+echarts可视化大屏,全国地图下钻,页面自适应

之前写过一篇关于数据大屏及地图下钻的文章 https://www.cnblogs.com/weijiutao/p/13977011.html ,但是存在诸多问题,如地图边界线及行政区划老旧,无法自适应问题等,正好抽时间又整理了一下修改的思路. 之前的文章已经获取了一套新的全国地图的行政区划及边界线,接下来就可以根据这套区划来进行地图的编写了.先来看一下最后的呈现效果. 代码目录如下地图采用了最新的行政区划及边界进行加载,具体获取方式在另一篇文章 https://www.cnblogs.com/

Qt编写数据可视化大屏界面电子看板11-自定义控件

一.前言说到自定义控件,我是感觉特别熟悉的几个字,本人亲自原创的自定义控件超过110个,都是来自各个行业的具体应用真实需求,而不是凭空捏造的,当然有几个小控件也有点凑数的嫌疑,在编写整个数据可视化大屏界面电子看板系统中,也用到了四五个自定义的控件,比如那个环形百分比图,多态进度条,合格率仪表盘,速度仪表盘等,这些控件在现有的类中是没有的,需要用QPainter这个牛逼的工具来绘制,类似于神笔马良似的,给我一个画笔,可以画出任意你想要的图形,好比我常说的心中有坐标,万物皆painter. 自定义

html5 canvas首屏自适应背景动画循环效果代码

模板描述:html5 canvas首屏自适应背景动画循环效果代码由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大家积极评论,给出宝贵意见下载演示地址本文地址:html5 canvas首屏自适应背景动画循环效果代码

大屏iPhone的适配 +iOS 图片尺寸要求

摘自:http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/ 苹果公司官网设计介绍到:Retina显示屏的超高像素密度已超过人眼能分辨的范围.Retina对图像设计(图标.启动画面和其它所有像素有关的东西)有什么影响呢?如果我们的app要支持Retina,就要提供高分辨率的(宽x2,高x2)的图片.同时,为了支持没有Retina的设备,仍旧要准备低分辨率的版本. 换言之,我们要准备两套设计图. 针对不同分辨率的图片,苹果规定了一个命名规范:假

基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化

前言在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上,各种数据一目了然.随着浏览器不断发展完善,使用 Web 做大屏展示也已经不是新鲜的事了.市面上已有不少的大屏解决方案,大部分是以放各种图表的形式呈现,基本是是 2D 的呈现.有些是根据投放屏幕的比例设计出来的,并不能自适应于其它的屏幕比例.最近学习了 Hightopo 的 HT for Web 产品

ECharts + Jquery 做大屏展示

HTML <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" /> <meta name

大屏FAQ

1. 大屏可以分为哪几类?帆软有哪些大屏硬件合作商?编辑拼接屏:通常由单个46-55寸的液晶显示屏组成屏幕墙,存在拼缝,借助矩阵.屏控系统来进行信号的输入与输出控制,可以实现屏幕墙上多个屏幕的组合.拆分显示. 小间距led墙:和拼接屏类似,由小单元led显示设备组成,基本上看不出有拼接缝. 一体机:就是类似cvtouch这种的一体机以及一些智能电视,可以认为是放大版显示器. 如果大屏客户希望帆软提供硬件厂商,可以根据需要联系 2. 一套完整拼接屏具备哪些硬件?编辑最合理的,还是要找大屏硬件商

使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课

前言: 今年是建国70周年,爱国热情异常的高涨,为自己身在如此安全.蓬勃发展的国家深感自豪. 我们公司楼下为庆祝国庆,拉了这样的标语,每个人做好一件事,就组成了我们强大的祖国. 看到这句话,深有感触,是的,强大的背后离不开我们每个人的奋力拼搏,作为基础研发的我们,我们也认认真真的做好每一次研发,不管成功失败,都是在前进的路上. 序: 今天要讲解的课程是<智慧园区与灯杆三维展示>课程. 首先我们描述一下智慧园区与灯杆的功能: 智慧园区:我们在上节课<使用webgl(three.js)搭建一

Qt编写项目作品大全（自定义控件+输入法+大屏电子看板+视频监控+楼宇对讲+气体安全等）

一.自定义控件大全 (一).控件介绍超过160个精美控件,涵盖了各种仪表盘.进度条.进度球.指南针.曲线图.标尺.温度计.导航条.导航栏,flatui.高亮按钮.滑动选择器.农历等.远超qwt集成的控件数量. 每个类都可以独立成一个单独的控件,零耦合,每个控件一个头文件和一个实现文件,不依赖其他文件,方便单个控件以源码形式集成到项目中,较少代码量.qwt的控件类环环相扣,高度耦合,想要使用其中一个控件,必须包含所有的代码. 全部纯Qt编写,QWidget+QPainter绘制,支持Qt4.6到

Qt编写数据可视化大屏界面电子看板系统

一.前言目前大屏大数据可视化UI这块非常火,趁热也用Qt来实现一个,Qt这个一站式超大型GUI超市,没有什么他做不了的,大屏电子看板当然也不在话下,有了QSS和QPainter这两个无敌的工具组合,借用几个Qt高手朋友的话来说,都是分分钟.在整个系统的编写过程中,发现数学知识真的还是蛮重要的,在重要的几个算法点上,需要多次用到二元一次方程才能搞定几个算法,比如如何分组绘制柱状图. 二.文章导航 Qt编写数据可视化大屏界面电子看板1-布局方案 https://blog.csdn.net/feiy

Qt编写数据可视化大屏界面电子看板13-基础版

一.前言之前发布的Qt编写的可视化大屏电子看板系统,很多开发者比较感兴趣,也收到了很多反馈意见,纵观市面上的大屏系统,基本上都是B/S结构的web版本,需要在后台进行自定义配置模块,绑定数据源等,其中比较有名的就是阿里云的DataV和百度的Sugar,都是很不错的,DataV是阿里云出品的专业大屏数据可视化服务,旨在让更多的人看到数据可视化的魅力,帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用,满足会议展览.业务监控.风险预警.地理信息分析等多种业务的展示需求.两者都可以通过拖

Qt编写数据可视化大屏界面电子看板12-数据库采集

一.前言数据采集是整个数据可视化大屏界面电子看板系统核心功能,没有数据源,这仅仅是个玩具UI,没啥用,当然默认做了定时器模拟数据,产生随机数据,这个可以直接配置文件修改来选择采用何种数据采集方法,总结了一下基本上会有这样几种数据源,timer-模拟数据 db-数据库采集 tcp-网络采集 http-post请求,大量的web会选择采用http作为post网络请求来获取数据,而对于本人来说,更喜欢用数据库作为数据源,这样可以避免很多扯皮的事情,比如请求出错或者得到错误的数据等,而数据库是死的,不

Qt编写数据可视化大屏界面电子看板9-曲线效果

一.前言为了编写数据可视化大屏界面电子看板系统,为了能够兼容Qt4和嵌入式linux系统,尤其是那种主频很低的,但是老板又需要在这种硬件上(比如树莓派.香橙派.全志H3.imx6)展示这么华丽的界面时,就必须用最传统的painter方法来实现所有的控件了,一开始使用的QChart来实现各个子控件,在使用过程中发现比较鸡肋,个人感觉QChart是所有的子模块中源码写的最烂的,本人把QChart的源码看了一遍,比如饼图控件,居然放置一个label用来显示对应的文字描述,都懒得用painter去绘制

Qt编写数据可视化大屏界面电子看板8-调整间距

一.前言在数据可视化大屏界面电子看板系统中,前期为了使用目标客户机,调整间距是必不可少的工作,QMainWindow中的QDockWidget,会默认生成布局和QSplitter调整宽高大小,鼠标移动到模块之间的缝隙处,鼠标指针会形成调整大小间距的那种,上下左右拉动就可以调整大小了.Qt的dock默认底部布局是被全部填充的,即一旦产生了底部Dock,则底部的左侧和右侧也属于底部布局,此时需要用setCorner方法来把这个布局给切掉,比如底部布局的左侧部分,可以切掉当做左侧布局使用,setCo

Qt编写数据可视化大屏界面电子看板5-恢复布局

一.前言恢复布局这个功能在整个数据可视化大屏界面电子看板系统中非常有用,很多时候不小心把现有布局拖动乱了,(当然如果不想布局被拖动改动,可以修改配置文件中的MoveEnable参数来控制,默认为真表示可以任意拖动布局,后期如果不想再被拖动可以设置为假.)人总归有不小心的时候,一旦不小心拖动了布局,则可以在软件没有退出之前恢复,鼠标右键菜单增加恢复布局这个功能就很有必要了,在保存布局以前,单击这个恢复布局,会自动恢复到当前布局的初始状态,如果不小心保存布局了,那就只能重新新建布局了,或者如果布局

Qt编写数据可视化大屏界面电子看板4-布局另存

一.前言布局另存是数据可视化大屏界面电子看板系统中的额外功能之一,主要用于有时候用户需要在现有布局上做个微调,然后直接将该布局另存为一个布局配置文件使用,可以省略重新新建布局重新来一次大的调整的工作,此功能主要是用到了配置文件的保存,另存为一个不同名字的配置文件即可,属于非常简单的功能,在代码上来讲,其实Qt的配置文件类QSettings使用起来不要太方便,不仅支持WIN的注册表的读取写入,还支持跨平台的INI文件,说白了其实就是个文本文件,个人比较喜欢用INI文件作为配置文件,这样一方面跨平

Qt编写数据可视化大屏界面电子看板3-新建布局

一.前言能够新建布局,也是数据可视化大屏界面电子看板系统中的必备功能之一,新建布局这样的功能一般做到右键菜单中,单击新建布局菜单,弹出输入框要求输入新的布局的名称,为了更符合国情,直接支持中文名称,保存成配置文件直接中文名称命名,这样方便用户理解,Qt5以来对乱码的问题解决的就比较好了,不像Qt4时代稍不留神就乱码了,Qt5只要保证源码文件utf-8编码基本上就很少遇到乱码问题了.新建布局必须要有个默认的窗体排列,Qt中的dock窗体,默认布局会以窗体的sizehint作为大小参照标准,也不一

Qt编写数据可视化大屏界面电子看板2-配色方案

一.前言做完整个数据可视化大屏界面电子看板系统后,为了提升点逼格,需要提供好几套默认的风格样式以供选择,这样用户可以选择自己喜欢的配色方案来作为整个系统的颜色方案,去看了下市面上大部分的大屏电子看板系统,都是以蓝色为主,部分黑色,估计也许这就是大众的审美吧,那就在数据可视化大屏界面电子看板系统中也加入蓝色风格.深蓝色风格.黑色风格,三种,加上默认的紫色风格,共计内置4套风格选择,Qt的QSS是我见过的最牛逼的换肤控制样式界面颜色的东东,这个工具用好了,别提有多爽,直接qApp->setStyl

html body scale 大屏自适应

热门专题