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

CSS宽高比100vw或100vh取决于窗口大小

是指使用CSS中的vw(视窗宽度单位)或vh(视窗高度单位)来设置元素的宽高比例,其中1vw等于视窗宽度的1%,1vh等于视窗高度的1%。

这种技术可以用于响应式设计,使元素的宽高比例能够根据用户设备的窗口大小自动调整,以适应不同屏幕尺寸的设备。通过使用vw或vh单位,可以确保元素的宽高比例在不同设备上保持一致,从而提供更好的用户体验。

优势:

  1. 响应式设计:使用vw或vh单位可以实现元素的宽高比例在不同设备上的自适应调整,提供更好的响应式设计效果。
  2. 简化开发:通过设置vw或vh单位,可以简化开发过程中对不同设备尺寸的适配工作,减少代码量和维护成本。
  3. 提高用户体验:元素的宽高比例能够根据用户设备的窗口大小自动调整,使内容在不同屏幕上展示更加合理和美观。

应用场景:

  1. 响应式网页设计:在开发响应式网页时,可以使用vw或vh单位来设置元素的宽高比例,以适应不同设备的屏幕尺寸。
  2. 视频播放器:在开发视频播放器时,可以使用vw或vh单位来设置视频容器的宽高比例,以确保视频在不同设备上的播放效果一致。

推荐的腾讯云相关产品和产品介绍链接地址: 腾讯云提供了丰富的云计算产品和服务,以下是一些与CSS宽高比相关的产品和服务:

  1. 腾讯云CDN(内容分发网络):提供全球加速、高可用、低时延的内容分发服务,可用于加速网页中的静态资源加载,提升用户访问体验。了解更多:https://cloud.tencent.com/product/cdn
  2. 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活调整服务器配置,满足不同规模和性能要求的应用场景。了解更多:https://cloud.tencent.com/product/cvm
  3. 腾讯云云存储(COS):提供安全、稳定、低成本的对象存储服务,可用于存储和管理网页中的静态资源文件。了解更多:https://cloud.tencent.com/product/cos

请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

每个高级前端工程师都应该知道的前端布局

使用弹性布局 使用百分比 避免写死宽度和高度 添加滚动条 使用 rem 3.移动终端的常用宽度和高度 垂直屏幕的常见宽高比:1:2, 2:3, 3:4, 3:5, 5:8, 9:16 横向屏幕的常见宽高比...flexible.js 插件还可以解决以下问题 em 和 rem 与之类似,它们都根据 font-size 来缩放页面布局,但 em 主要取决于直接父级标签 font-size 的大小,并且只会查找最近的父级标签...4.4 VW、VH 响应式布局 因为 100vw = 100 视图窗口宽度,100vh = 100 视图窗口高度,那么根据 750 的设计草案,100vw 就是 750。...align-content: order, flex-grow, flex-shrink, flex-basis, align-self 4.6 双翼布局 左右两列的宽度是恒定的,中间一列的宽度则根据浏览器窗口大小自适应调整...4.7 圣杯布局 与双飞翼布局一样,左右两栏的宽度是恒定的,中间一栏的宽度根据浏览器窗口大小自适应,但它更加完整。

22320

css视口单位vw,vh的妙用(embed篇)

embed_other.whitelist 视频demo 如上视频[av9214469],使用的是embed标签,大家都知道embed的播放器很难自适应,不是过分拉伸改变视频比例,就是写死播放器长宽,导致不能随网页大小的变化自由变换尺寸...只需级行css就解决了 核心css代码,锁死视频比例16:9 embed { height: calc(9 * 100vw/ 16);width: 100%; } 宽度设置为100%,宽度铺满父级div...: calc(9 * (100vw - 330px)/ 16); width: 100%;} } @media only screen and (max-width:767px){ embed{ height...: calc(9 * 100vw/ 16);width: 100%;} } 其实就是对于电脑端设备,在宽度设置上,提前减去330px,然后在乘9/16。...在电脑端css加入下面的东东 max-height:100vh;/*限制视频高度最大不能超过浏览器窗口高度*/ max-width:calc(16 * 100vh/ 9);/*限制视频宽度最大不能超过浏览器窗口高度的

1.1K30
  • 可视化大屏的几种屏幕适配方案,总有一种是你需要的

    假设我们正在开发一个可视化拖拽的搭建平台,可以拖拽生成工作台或可视化大屏,或者直接就是开发一个大屏,首先必须要考虑的一个问题就是页面如何适应屏幕,因为我们在搭建开发时一般都会基于一个固定的宽高,但是实际的屏幕可能大小不一.../FunnelChart> .canvasBox { width: 100vw...; height: 100vh; } .canvas { position: relative; } 每个图表组件的宽高都设为100%,然后都被Widget组件包裹,所以实际宽高是依赖...我们前面的demo初始就是这种方式: 图片 当然,如果宽高小于屏幕的话居中的逻辑需要加一下,居中的方法有很多,通过css、js都可,根据自己的喜好来就行: // 画布的位置 const canvasLeft...实现也很简单,计算一下画布原始比例,再计算一下屏幕的比例,然后再判断是宽度和屏幕一致,高度自适应,还是高度和屏幕一致,宽度自适应: // 当前窗口宽高比例 let windowWidth = window.innerWidth

    3.1K41

    css3新发现height:100vh;

    vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度高度中较大的那个。...其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度高度中较小的那个。...calc是 css3提供的一个在css文件中计算值的函数: 用于动态计算长度值。...100% – 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 “+”, “-“, “*”, “/” 运算; calc()函数使用标准的数学运算优先级规则; calc(100vh...- 10px) 表示整个浏览器窗口高度减去10px的大小 calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小 1 2 一般用来设置流式布局宽高,当然,你可以使用calc

    64020

    css3中的width:100vh以及calc(100vh + 10px)

    vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度高度中较大的那个。...其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度高度中较小的那个。...calc是 css3提供的一个在css文件中计算值的函数: 用于动态计算长度值。...– 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 “+”, “-“, “*”, “/” 运算; calc()函数使用标准的数学运算优先级规则; calc(100vh...- 10px) 表示整个浏览器窗口高度减去10px的大小 calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小 一般用来设置流式布局宽高,当然,你可以使用calc()给元素的

    89120

    Chrome 108 :发布新的 CSS 布局单位!

    在 Web 浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI, 菜单栏等 — 即指你正在浏览的文档的那一部分。...height) : 1vh 为视觉视口高度的 1% 另外还有两个相关的衍生单位: vmin : vw 和 vh 中的较小值 vmax : 选取 vw 和 vh 中的较大值 如果我们将一个元素的宽度设置为 100vw...高度设置为 100vh,它将完全覆盖视觉视口: 这些单位有很好的浏览器兼容性,也在桌面端布局中得到了很好的应用。...因此,尺寸过大的 100vh 元素可能会从视口中溢出。 当网页向下滚动时,这些动态工具栏可能又会自动缩回。在这种状态下,尺寸为 100vh 的元素又可以覆盖整个视口。...为了解决这个问题,CSS 工作组规定了视口的各种状态。 Large viewport(大视口):视口大小假设任何动态工具栏都是收缩状态。

    1.6K20

    响应式图像

    需要注意是,源图尺寸值不能使用百分比,vw是唯一可用的CSS单位。...占满宽度的元素: % > vw 正如我所提到的,vw单位根据视窗的宽度决定它的大小。然而,浏览器是根据浏览器的窗口计算视窗大小的,包括了滚动条的空间。...因此,如果你将一个元素设置为100vw,这个元素将会延伸到html和body元素范围之外。在这个例子中,我用红色边框包裹html元素,然后给section元素设置背景颜色。 ?...然而,用vh的话,就像下面写的那么简单: .example { height: 100vh; }   不管.example元素如何嵌套,它还是能够相对于视窗尺寸设置大小。...; } 占满全屏的内容块像“多页面”一样 section { width: 100%; height: 100vh; } ?

    2.5K10

    CSS 也能实现碰撞检测?

    但是代码层面不够优雅,主要有两点问题: 元素移动使用的是 top 和 left,性能相对较差,需要使用 transform 进行替代 代码中 hardcode 了 100px,由于 DEMO 中小球的大小是...100px x 100px,并且在动画的代码中也使用了 100px 这个值进行了运动终态的计算,因此如果想修改小球的元素大小,需要改动地方较多 上述两个问题,使用 transform: translate...并且,将动画代码中的 100px 替换成了 100%,这一点的好处是,在 transform: translate 中,100% 表示的是元素本身的高宽,这样,当我们改变元素本身的大小时,就无需再改变...下面是我使用 CSS-Doodle 实现的纯 CSS 的粒子效果,其核心原理与上面的保持一致,只是添加了更多的随机性: Amazing!...是不是非常有趣,整个效果的代码基于 CSS-doodle 的语法,不超过 40 行。完整的代码,你可以戳这里:CSS Doodle - CSS Particles Animation

    30040

    能让你受益匪浅的10个css使用技巧

    02 文字居中兼容 正常处理文字上下居中的手段是让元素height和line-height相等,但是安卓环境下当字体大小<14px/0.7rem的时候会出现居中失效的情况。...04 使用currentColor来简化css 设置border-color、background-color等颜色的时候,可以使用currentColor[与当前元素的字体颜色相同]来简化css。...09 图片自适应占位方式 当图片未正确加载,加载完成前,由于图片高度为0,其容器会因为没有内容,导致容器无法撑高而塌陷,而如果加载较慢则会在图片加载完成后出现闪烁的情况。...因此对于宽高比例固定的情况,可以利用padding-top/bottom用于图片自适应占位,解决页面闪烁的问题。...min-width: 375px) { html { /* iPhone6的375px尺寸作为16px基准,414px正好18px大小, 600 20px */

    1.6K20

    【前端不得不会的各种特效】01.滑动显示效果的数字选择器代码实现

    前言 本文将介绍一种滑动显示效果,通过HTML和CSS实现。这种效果可以在网页中展示一组数字,并且在鼠标悬停获得焦点时产生交互效果。...数字在获得焦点鼠标悬停时,通过设置伪类:hover和:focus-visible的样式,实现数字的动态效果。...*选择器指定了所有元素应使用border-box模型进行盒子大小计算。body选择器定义了页面主体部分的样式,其中min-height: 100vh;将页面高度设置为视口高度。...body::before { --line: hsl(0 0% 95% / 0.25); content: ""; height: 100vh; width: 100vw; position...height和width属性将伪元素的高度和宽度设置为100vh100vw,使其与视口的尺寸相同。position: fixed;将伪元素固定在视口的位置。

    44910
    领券