首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

EasyGBS首页内容无法占满页面高度优化

为了方便用户对整个系统使用率有大致了解,TSINGSEE青犀视频大多数视频平台首页都会记录大致使用情况,比如CPU使用、内存占用、带宽等服务器基本信息。...在我们日常对EasyGBS测试过程中发现,进入EasyGBS首页后,页面内容无法占满页面高度,导致页面底部有留白。...于是对前端代码进行排查,找到图表DOM节点,发现图表父级DOM节点最大高度为800px,导致了无法撑满高度,但将该数据调整最大高度为900px时,发现中间空了一块。...经过查找发现,图表DOM节点最大高度为400px,限制了撑满。...因此我们需要找到项目中dataStatistics文件下index.vue文件,将图表最大高度修改为600px,也就是在下图标注内容中做修改: 修改完成后首页界面即可恢复正常。

76010

Android如何获取屏幕、状态栏及标题栏高度详解

前言 本文主要给大家介绍了关于Android获取屏幕、状态栏及标题栏高度相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细介绍吧 在开始之前,先来看一张图: ?...绿色区域:屏幕区域 蓝色区域:状态栏区域 红色区域:标题栏区域 黄色区域:view绘制区域 1.Android手机屏幕高度 整个手机使用发亮,不使用变黑部分,绿色区域 获取屏幕高度方法一 DisplayMetrics...:" + dm.heightPixels); 获取屏幕高度方法二 DisplayMetrics displayMetrics = getResources().getDisplayMetrics();...: 状态栏高度 = 屏幕高度 – 应用区高度 //屏幕 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay...:" + outRect2.height()); 总结 以上就是这篇文章全部内容了,希望本文内容对大家学习或者工作具有一定参考学习价值,如果有疑问大家可以留言交流,谢谢大家对ZaLou.Cn支持

4.5K10
您找到你想要的搜索结果了吗?
是的
没有找到

关于响应式布局,你需要了解知识点

响应式布局,就是根据不同设备展示不同布局,以免更方便用户浏览页面。 举个很简单例子,我们在电脑上浏览网页,屏幕非常大,这时候可能采用是如下图所示布局方式。...总结一下,所谓响应式布局,就是根据不同浏览介质,制定不同布局方案,以便于用户更好地浏览信息。 快速入门 了解完响应式布局原理,我们从代码层面来看看如何实现这样响应式布局。...mediafeature 常用取值有如下几个: height 定义输出设备页面可见区域高度 height 定义输出设备页面可见区域高度 min-resolution 定义设备最小分辨率 max-resolution...,我们想针对所有屏幕宽度小于768px设备应用某些样式,那么我们可以这么写: @media (max-width:768px) { /* … */ } 如果我们想针对所有屏幕宽度小于 768px...并且屏幕高度小于 500px 设备应用某些样式,那么我们可以这么写: @media (max-width:768px and max-height: 500px) { /* … */ } 总结 看到这里

21510

CSS @media 规则

CSS 语法 @media +(and | not | only) + 媒体类型 +(and+ 媒体查询){ CSS-Code; } (and+媒体查询),这个是用来限制查询条件,例如当屏幕小于最大宽度时...用于所有媒体类型设备。 print 用于打印机。 screen 用于计算机屏幕、平板电脑、智能手机等。 speech 用于朗读页面屏幕阅读器。...device-height 输出设备渲染表面(如屏幕高度。已在 Media Queries Level 4 中被弃用。 device-width 输出设备渲染表面(如屏幕宽度。...overflow-block 输出设备如何处理沿块轴溢出视口(viewport)内容。在 Media Queries Level 4 中被添加。...prefers-reduced-motion 用户是否希望页面上出现更少动态效果。在 Media Queries Level 5 中被添加。

1.5K20

CSS @media 规则

用于所有媒体类型设备。print用于打印机。screen用于计算机屏幕、平板电脑、智能手机等。speech用于朗读页面屏幕阅读器。...device-height输出设备渲染表面(如屏幕高度。已在 Media Queries Level 4 中被弃用。device-width输出设备渲染表面(如屏幕宽度。...forced-colors检测是用户代理否限制调色板。在 Media Queries Level 5 中被添加。grid输出设备使用网格屏幕还是点阵屏幕?height视口(viewport)高度。...如果设备并非黑白屏幕,则该值为 0。orientation视窗(viewport)旋转方向(横屏还是竖屏模式)。overflow-block输出设备如何处理沿块轴溢出视口(viewport)内容。...prefers-reduced-motion用户是否希望页面上出现更少动态效果。在 Media Queries Level 5 中被添加。

1.7K60

响应式图像

,不管viewport宽度如何,始终保持相同宽度。...如果页面延伸超过视口高度——滚动条出现——视窗宽度将会大于html元素宽度。 因此,如果你将一个元素设置为100vw,这个元素将会延伸到html和body元素范围之外。...占满高度元素:vh > % 在另一方面,当使一个元素跨越整个页面高度时,vh远比百分比单位好。...因为用百分比定义元素大小是由它父元素决定,只有父元素也填满整个屏幕高度时我们才能拥有一个填满整个屏幕高度元素。...滚动条问题也不是一个问题,因为现在大多数页面通常不会有水平滚动条。 vh应用 全屏背景图片 vh单位一个典型用途是用来创建一个横跨整个屏幕高度和宽度背景图片,不管设备大小。

2.5K10

静态布局、自适应布局、流式布局、响应式布局、弹性布局等概念和区别

常规pc网站都是静态(定宽度)布局,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端。...因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕手机下显示效果会变成有些页面元素宽度被拉很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调...,会随着设备改变而改变展示样式,而自适应不会,所有的设备看起来都是一套模板,不过是长度或者图片变小了,不会根据设备采用不同展示样式,流式就是采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示...如何实现响应式布局:折腾响应式布局设计,应运而生web页面响应布局 弹性布局(rem/em布局) 参考:流布局与响应式网页设计有什么区别?...但是,如果从网站易用性方面考虑,字体大小应该是可变,一些视力不是那么好的人需要放大字体才能看得清页面内容。然而,占据大部分浏览器市场IE无法调整那些使用px作为单位字体大小。

10K33

【前端攻略--HTMLCSS】媒体查询

备注:screen 意思是告知设备在打印页面时使用无衬线体,屏幕上显示也用无衬线字体,现在你会去打印一张网页吗?不会吧!...所以目前网站都不会考虑用户去打印网站页面,so...screen可以不用写,直接省去. ②这是媒体查询 页面最小宽度标准写法 @media screen and (min-width:960px){.... width/height:浏览器可视宽度(也叫视口)/浏览器可见高度. device-width/device-height:设备屏幕宽度/设备屏幕高度. color:检测颜色位数。...orientation:判断当前设备是横屏还是竖屏. aspect-ratio:检测浏览器可视宽度和高度比例。...(现在宽高比为16:9是最佳,比如我做直播窗口,要求宽高比就是16:9) device-aspect-ratio:检测设备宽度和高度比例。 resolution:检测屏幕或打印机分辨率。

2K10

移动端适配必须掌握基本概念和适配方案

通常情况下,大多数移动设备 Viewport(一般指布局视口)宽度都是 980 像素,而可视视口(即设备独立像素)通常都小于 980 像素。...(设备高度) initial-scale 定义初始缩放比例 整数或小数 maximum-scale 定义允许用户缩放到最大比例 整数或小数 minimum-scale 定义允许用户缩放到最小比例...细心观察会发现,实际上这些适配方案是基于两种不同设计思想而产生。一种是通过缩放处理屏蔽屏幕尺寸和分辨率影响,保证内容元素数量一致性。...这种做法产生结果是屏幕尺寸越大设备显示内容元素越大,反之亦然。另一种是不进行缩放处理,保证内容元素大小一致性。这种做法产生结果是屏幕尺寸越大设备在横向上显示内容元素越多,反之亦然。...当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当行为布局方式,提供一种更加有效方式来对一个容器中子元素进行排列、对齐和分配空白空间。

97740

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

Modal navigation drawers 使用遮罩来阻止用户与 app 内容其余部分进行交互。 它们高于大多数 app 元素,不会影响屏幕布局网格。 主要用于屏幕空间有限移动设备。...导航抽屉表可以从屏幕左侧出现 (1),或者在与 bottom app bar (2)同时使用时从屏幕底部打开。 范围小于62.5% ?...比 top app bar 更低高度 ---- Modal drawer 用法 Modal navigation drawers 会通过遮罩阻止用户与 app 内容其余部分进行交互。...行为 移动端打开(纵向) 与其他 modal bottom sheets 一样, bottom navigation drawer 初始垂直位置基于其内容屏幕高度,但最初不能在高于屏幕高度50%以上打开...·如果抽屉内容低于屏幕高度50%,则 drawer 全部打开 ·如果 drawer 内容大于屏幕高度50%,请先将其打开至50%,然后允许用户将 drawer 向上拖动至其全高或屏幕高度(以先到者为准

3.8K40

响应式设计

给所有用户提供同一份 HTML 和 CSS。通过使用几个关键技术,根据用户浏览器视口大小(或者屏幕分辨率)让内容有不一样渲染结果。这种方式不需要分别维护两个网站。...除了前面提到交互菜单,移动版设计主要关注内容。在大屏上,可以把页面的大块区域拿来做头部、主图、和菜单。然而在移动设备上,用户通常有更明确目标。 移动版设计就是内容设计。...千万不要让用户放大页面,才能点中一个小小按钮或者链接。 # 给视口添加 meta 标签 视口meta标签。这个 HTML 标签告诉移动设备,你已经特意将网页适配了小屏设备。...这样就可以根据屏幕大小定制样式。可以针对小屏设备定义一套样式,针对中等屏幕设备定义另一套样式,针对大屏设备再定义一套样式,这样就可以让页面内容拥有多种布局。...)——匹配高度小于等于20em视口 (orientation: landscape)——匹配宽度大于高度视口 (orientation: portrait)——匹配高度大于宽度视口 (min-resolution

2K10

响应式布局,你需要知道这些

我们期望页面可以根据用户设备环境,比如系统,分辨率,屏幕尺寸等因素,进行自发式调整,提供更适合当前环境阅读和操作体验,对已有和未来即将出现设备有一定适应能力。 这就是响应式设计理念。...,必须小于等于 maximum-scale maximum-scale,0-10,最大缩放比例,必须大于等于 minimum-scale user-scalable,yes/no,是否允许用户缩放页面,..., /* 很小设备(手机等,小于 600px) */ @media only screen and (max-width: 600px) { } /* 比较小设备(竖屏平板,屏幕较大手机等,...内容会溢出视口外,导致出现横向滚动条对不对,这在移动端是非常不好浏览体验,因为用户往往更习惯上下滚动,而不是左右滚动,所以我们需要确保图片内容不要超出 viewport,可以通过设置元素最大宽度进行限制...,以更好地优化不同尺寸大小设备用户体验。

1.6K20

CSS3笔记

speech 用于屏幕阅读器 多媒体功能 aspect-ratio 定义输出设备页面可见区域宽度与高度比率 color 定义输出设备每一组彩色原件个数。...如果没有使用彩色查询表,则值等于0 device-aspect-ratio 定义输出设备屏幕可见宽度与高度比率。 device-height 定义输出设备屏幕可见高度。...device-width 定义输出设备屏幕可见宽度。 grid 用来查询输出设备是否使用栅格或点阵。 height 定义输出设备页面可见区域高度。...max-device-height 定义输出设备屏幕可见最大高度。 max-device-width 定义输出设备屏幕最大可见宽度。...min-device-height 定义输出设备屏幕最小可见高度。 min-height 定义输出设备页面最小可见区域高度

3.6K30

CSS Viewport 单位,很多人还不知道使用它来快速布局!

在这种情况下,值将根据视口高度计算,因为它小于宽度。...但是,如果没有适当测试就直接使用它可能会踩到坑。 让我们看下面的视频: ? 体大小变得非常小,这不利于可访问性和用户体验。据我所知,移动设备最小字体大小不应该不于14px。...粘性布局(footer) 在大屏幕上,网站内容有时候很少,footer 没有粘在底部。这很正常,也不被认为是一种不好做法。但是,还有改进余地。考虑下面代表问题示图: ?...在我职业生涯中,我没有使用固定高度页脚,因为在例如不同屏幕尺寸下,此footer是不可行。...响应式元素 假设我们有一个作品集来展示我们响应式设计工作,并且我们有三种设备(移动设备、平板电脑和笔记本电脑)。每个设备包含一个图像。目标使用 CSS 来响应适配这些页面。 ?

3.2K30

原生css写响应式网页

写在前面的话:随着移动设备逐渐普及和Web技术发展,跨端Web开发需求将会越来越大。如何在多种设备上进行跨端界面适配呢?我们可以利用CSS3Media Query来实现。...第一步:Meta标签(查看演示) 大多数移动浏览器将HTML页面放大为宽视图(viewport)以符合屏幕分辨率。你可以使用视图meta标签来进行重置。...[endif]--> 第二步:HTML结构 在这个例子里,我有一个包括头部、内容、侧边栏和页脚基本页面布局。...它根据条件告诉浏览器如何为指定视图宽度渲染页面。 当视图宽度为小于等于980像素时,如下规则将会生效。基本上,我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。...对于小于等于480像素(手机屏幕情况,将#header元素高度设置为自适应,将h1字体大小修改为24像素并隐藏侧边栏。 ? 你可以根据你喜好添加足够多媒介查询。

4.1K90

2016.06 第三周 群问题分享

touch事件 参考答案 当用户手指放在移动设备屏幕上滑动会触发touch事件; 以下支持webkit内核浏览器: touchstart——当手指触碰屏幕时候发生。...通常我们为了防止页面的滚动,会调用eventpreventDefault()可以阻止默认事件发生,达到阻止页面滚动效果 touchend——当手指离开屏幕时触发 touchcancel——系统停止跟踪触摸时会触发...通常我们再滑屏页面,会调用csshtml{-ms-touch-action: none;}可以阻止默认情况发生:阻止页面滚动 MSPointerUp——当手指离开屏幕时触发 如何用jQuery实现两个...div等高 2016.06.20~2016.06.24 核心内容 jQuery 参考答案 有时你希望无论两个 div 各自包含什么内容,它们总有相同高度: $('.div').css('min-height...', $('.main-div').height()); 这个例子设置了 min-height,意味着高度可以大于主 div 而不能小于它。

95890

07-移动端开发教程-移动端视口

在说分辨率时候我们常常会把大值说在前面,所以在PC端屏幕宽度比高度值要大一点,第一个值一般是指宽度第二个值为高度。 移动端正好相反,手机一般宽度都是小于高度,所以第一个值是宽度。...) initial-scale [0.0-10.0] 定义初始页面(布局视口)缩放值 minimum-scale [0.0-10.0] 定义用户缩小最小比例,它必须小于或等于maximum-scale设置...: 第一,不需要用户缩放和横向滚动条就能正常查看网站所有内容; 第二,显示文字大小是合适,比如一段14px大小文字,不会因为在一个高密度像素屏幕里显示得太小而无法看清,理想情况是这段14px...视觉视口:当页面手动放大时候,用户可以看到网页内容减少,视觉视口尺寸变小。反之,同理不赘述。...那么用户最终能够将页面放大到这个初始页面大小5倍。

1.8K120

07-移动端开发教程-移动端视口

在说分辨率时候我们常常会把大值说在前面,所以在PC端屏幕宽度比高度值要大一点,第一个值一般是指宽度第二个值为高度。 移动端正好相反,手机一般宽度都是小于高度,所以第一个值是宽度。...,单位为像素(未实行) initial-scale [0.0-10.0] 定义初始页面(布局视口)缩放值 minimum-scale [0.0-10.0] 定义用户缩小最小比例,它必须小于或等于maximum-scale...: 第一,不需要用户缩放和横向滚动条就能正常查看网站所有内容; 第二,显示文字大小是合适,比如一段14px大小文字,不会因为在一个高密度像素屏幕里显示得太小而无法看清,理想情况是这段14px...看一图就明了: 普通屏幕 两倍屏 视觉视口:当页面手动放大时候,用户可以看到网页内容减少,视觉视口尺寸变小。反之,同理不赘述。...那么用户最终能够将页面放大到这个初始页面大小5倍。

1.4K80

min-aspect-ratio和max-aspect-ratio宽高比自适应

device-aspect-ratio device-aspect-ratio 定义输出设备屏幕可见宽度与高度比率。...前缀是device,也能证明,这个属性是按照设备尺寸来,为什么单独说这个呢,因为不管是浏览器还是APP,所有的承载H5页面的容器,都有自己header头以及最上面的手机时间功能显示区域,一般这些内容...,会占去120px(双倍屏上,这个数据可能不准,只是想说,会被这些占用设备可视区域可用高度,如果你是在浏览器全屏的话,就当我没说这些啦)高度。...aspect-ratio aspect-ratio 定义输出设备页面可见区域宽度与高度比率 可视区域,这个对于我们来说,才是真正需要。...{ // 如果宽高比是9:16的话,显示这个内容 } aspect-ratio取值:width/height,即宽度与高度对比 一般情况下,在PC端是:width > height,在移动端时候

5.4K10
领券