开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

材质UI卡媒体高度为纵横比还是使用vh？

材质UI卡媒体高度的选择应根据具体情况而定。材质UI是一种基于Google Material Design设计语言的前端框架，用于构建现代化的Web应用程序。在材质UI中，卡片是一种常见的UI元素，用于展示信息和内容。

对于卡片中嵌入的媒体元素（如图片、视频等），可以根据需求选择使用纵横比（aspect ratio）或视口高度（vh）来设置高度。

纵横比（aspect ratio）：使用纵横比可以确保媒体元素在不同屏幕尺寸下保持一定的宽高比例，以适应不同设备的显示效果。通过设置媒体元素的宽度和padding-bottom属性来实现。例如，可以使用16:9的纵横比（即宽高比为1.77:1），设置padding-bottom为56.25%（即高度为宽度的56.25%），以实现一个宽高比为16:9的媒体元素。
视口高度（vh）：使用视口高度可以根据设备的可视区域高度来设置媒体元素的高度，以确保其在不同屏幕尺寸下占据合适的空间。视口高度是相对于视口高度的百分比，例如，设置媒体元素的高度为50vh，表示其高度将占据可视区域高度的50%。

选择使用纵横比还是视口高度取决于具体的设计需求和用户体验考虑。如果需要确保媒体元素在不同屏幕尺寸下保持一定的宽高比例，可以选择纵横比；如果需要根据设备的可视区域高度来自适应调整媒体元素的高度，可以选择视口高度。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
腾讯云前端开发服务：https://cloud.tencent.com/product/fe
腾讯云后端开发服务：https://cloud.tencent.com/product/ba
腾讯云数据库服务：https://cloud.tencent.com/product/cdb
腾讯云服务器运维服务：https://cloud.tencent.com/product/cvm
腾讯云音视频服务：https://cloud.tencent.com/product/tcav
腾讯云人工智能服务：https://cloud.tencent.com/product/ai
腾讯云物联网服务：https://cloud.tencent.com/product/iot
腾讯云移动开发服务：https://cloud.tencent.com/product/mob
腾讯云存储服务：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/baas
腾讯云元宇宙服务：https://cloud.tencent.com/product/mu

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

简介根据CSS规范，视口百分比单位相对于初始包含块的大小，它是web页面的根元素。视口单位为：vw，vh，vmin和vmax。 vw单位表示根元素宽度的百分比。1vw等于视口宽度的1%。...假设我们有一个元素与以下CSS： .element { width: 50vw; } 当视口宽度为500px时，50vw计算如下 width = 500*50% = 250px 视口高度 vh单位表示根元素高度的百分比...你猜对了，字体大小为95px左右，这是一个很大的值。为了防止这种情况，我们应该在某些断点上使用媒体查询并更改字体大小。...2.第二种解决方案：Flexbox和视口单位（推荐）通过将100vh设置为body元素的高度，然后可以使用flexbox来使main元素占用剩余空间。...纵横比我们可以使用vw单位创建响应元素，以保持其纵横比，而不管视口大小如何。首先，需要先确定所需的纵横比，对于此示例，使用9/16。

3.3K3 0

CSS相关

16px为继承值而使用rem前，一般都需要加入一些js代码，通过判断屏幕宽度去计算根[html]的font-size,代码为： (function() { function autoRootFontSize...js去计算font-size，直接使用CSS的为解决问题的重点： /* 基于UI width=750px DPR=2的页面 */ html { font-size: calc(100vw /...7.5); } 2. vw vh vw: 1vh表示屏幕可视宽度的1% vh: 1vh表示屏幕可视高度的1% calc： calc()函数用于动态计算长度值,可以组合不同的单位,特别需要注意的是运算符前后都需要保留一个空格...right bottom no-repeat, url(summertrack.png) left top repeat; background-size 指定背景图像的大小–该大小是相对于父元素的高度和宽度的百分比...响应式图片相册在这里正确用好这几个属性：box-sizing:border、@media、clear:both 20.CSS3多媒体查询 CSS3多媒体类型值描述 all 用于所有多媒体类型设备

1.5K3 0

最新iOS设计规范七｜10大视觉规范（Visual Design）

也不要使用诸如括号、边框、形状或说明文字之类的视觉装饰来引起对这些区域的特别注意。注意状态栏的高度。全屏iPhone型号的状态栏比其他型号高。...通常，为UI元素使用语义定义的系统颜色。 ? 动态系统颜色除了以上系统颜色外，iOS还提供用于传达其目的而非其外观或颜色值的语义定义颜色。例如用于用于背景区域和前景内容的颜色，标签、分隔符和填充。...十、视频（Video）系统提供的视频播放器可提供两种查看模式：全屏（纵横填充）和适合屏幕（纵横比）。默认情况下，系统根据视频的纵横比选择观看模式，用户可以在播放期间切换模式。全屏（纵横填充）模式。...始终以原生纵横比显示视频内容。当视频内容使用嵌入式信箱或邮筒模式填充以符合特定的纵横比时，iOS无法根据用户选择的观看模式正确地缩放视频。嵌入的视频会使其在全屏模式和适合屏幕模式下显示得更小。...使用原生纵横比还可以防止视频在边到边、非全屏的环境中正确显示内容，比如iPad上的画中画模式。

8.1K3 0

响应式图像

根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。 2. sizes属性有两个值：第一个是媒体条件；第二个是源图尺寸值，在特定媒体条件下，此值决定了图片的宽度。...需要注意是，源图尺寸值不能使用百分比，vw是唯一可用的CSS单位。...因为这个细微的差别，当使一个元素横跨整个页面的宽度时，最好使用百分比单位而不是视口的宽度。 2....占满高度的元素:vh > % 在另一方面，当使一个元素跨越整个页面的高度时，vh远比百分比单位好。...然而，用vh的话，就像下面写的那么简单： .example { height: 100vh; } 　　不管.example元素如何嵌套，它还是能够相对于视窗尺寸设置大小。

2.5K1 0

移动适配的长度单位

rem单位效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）与px单位或百分比布局对比： px单位是绝对单位百分比布局特点宽度自适应，高度固定 rem单位是相对单位 rem单位是相对于HTML标签的字号计算结果...媒体查询使用媒体查询设置差异化CSS样式，媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式，当某个条件成立, 执行对应的CSS样式。...作用：可以使用媒体查询, 根据不同的视口宽度, 设置不同的根字号。...1/100视口宽度）/vh尺寸（1/100视口高度）查看设计稿宽度确定参考设备宽度（视口宽度）/设备高度 (视口高度) 确定 vw尺寸（1/100视口宽度）/vh尺寸（1/100 视口高度） vw...单位的尺寸=px单位数值/（1/100视口宽度）注：在开发中，vw和 vh不会混用，因为 vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

1.3K2 0

移动端布局(大结局)之vw和vh

vw/vh是什么 vw/vh是一个相对单位(类似em和rem相对单位) vw: viewport width 视口宽度单位 vh: viewport height 视口高度单位相对视口尺寸计算结果...1vw=1/100视口宽度 1vh=1/100视口高度例如: 当前视口为375px,则1vw就是3.75px....注意事项: 和百分比有区别的,百分比是相对于父元素来说的,而vw和vh总是针对当前视口来说的....做了一个10vw和10vh的试试看效果: 果然是跟着视口大小变化的,感觉比rem要方便很多啊...也不用媒体查询了我们下载一个软件:像素大厨 vw注意事项: 因为涉及到大量除法,还是适应...less搭配更好点我们本质是根据视口宽度来等比例缩放页面元素的高度和宽度的,所以开发中vw就基本够用了,vh很少使用.

1K2 1

细说移动端经典的REM布局与新秀VW布局

静态布局直接使用px作为单位 2. 流式布局宽度使用%百分比，高度使用px作为单位 3. 自适应布局创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。...使用 @media媒体查询来切换多个布局 4. 响应式布局通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用 5. 弹性布局通常指的是rem或em布局。... : 1vh 等于视窗高度的1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 ?...实现容器固定纵横比纵横比其实还是第一次听说，做方案调研设计就一并整合过来了它主要是用于响应式设计中的iframe、img 和video之类的元素，实现纵横比有很多方法这里使用 padding-top...百分比的方法，实现一下容器内文本区的固定纵横比 ?

12K4 2

面试官：你了解过移动端适配吗？

在css中，可以使用媒体查询min-device-pixel-ratio，区分dpr：我们根据这个像素比，来算出他对应应该有的大小,但是暴露个非常大的兼容问题 ?...-webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden; } css根据设备像素比媒体查询后的解决方案...区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。...so，这个用缩放来解决问题的方案是个过渡方案，注定时代所淘汰 2、vw，vh布局 vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight...在css中使用px 3. 在适当的场景使用flex布局，或者配合vw进行自适应 4. 在跨设备类型的时候（pc 手机平板）使用媒体查询 5.

1.4K1 0

响应式布局的实现

媒体查询通过使用CSS媒体查询来实现响应式布局，针对不同的媒体类型设置不同的样式规则，可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS适配。使用link链接 <!...单位百分比单位当度量单位设置为百分比时，即可使浏览器组件宽高随着浏览器的大小相应变化。...子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width。...设置border-radius为百分比，则是相对于自身的宽度，还有translate、background-size等都是相对于自身的。...vh vw vmin vmax vh: 相对于视窗的高度，1vh等于视窗高度的1%。 vw: 相对于视窗的宽度，1vw等于视窗宽度的1%。 vmin: vw和vh中的较小值。

1.9K3 0

微信小程序开发学习笔记（二）——小程序框架、组件、WXML

开放能力、无障碍访问 2.0、单位 2.0.1、响应式单位rpx 在使用 CSS 进行移动端的网页开发时，由于不同手机设备的屏幕比，在换算像素单位时会遇到很多麻烦。...使用竖向滚动时，需要给scroll-view一个固定高度说白了其实就是一个可以允许滚动的容器，只需要设置最大高度即可属性说明：属性类型默认值必填说明最低版本 scroll-x boolean...图片资源地址 1.0.0 mode string scaleToFill 否图片裁剪、缩放的模式 1.0.0 合法值说明最低版本 scaleToFill 缩放模式，不保持纵横比缩放图片...，使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。...aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

1.9K4 0

Unity-UI（UGUI详解）02.1 Canvas组件、Visual组件

布局的分辨率，这个分辨率将随着屏幕分辨率进行变化 Screen Match Mode：如果当前分辨率的纵横比不适合参考分辨率，则用于缩放画布区域的模式 Match Width or Height...Match：决定缩放的时候宽还是高作为引用在Constant Physical Size下进行设置： Physical Unit：设置物理单元的位置和尺寸。...：实现淡入淡出窗口的效果使整个控件不可用（置灰），通过给父物体添加CanvasGroup并设置Interactable属性为false 设置一些UI元素不能通过鼠标点击事件通过此组件或者设置他们的父物体的...如果子元素的大小比父元素大，将显示比父元素小的部分。...RectMask2D的限制：只能在2D空间下不能正确的显示非共面元素 RectMask2D的优势：它不使用模板缓冲没有额外的draw calls 没有材质的改变更快的表现 UI Effect

2.6K1 0

移动端开发的几点建议

在此，我建议你使用 vw 和 vh 作为移动端开发的相对单位，包括字体大小、元素宽高、距离等等。...理由如下： vw vh 换算方便 1vw = 屏幕 1% 的宽度 1vh = 屏幕 1% 的高度兼容性好无论是在网页还是在小程序，只要支持 css 就能完美兼容。...PS：在页面上有 input 输入框的时候，不要使用 vh 作为计量单位，因为软键盘弹出时会压缩页面高度，如果用 vh 作为计量单位，会导致页面严重变形，此时用 vw 就没有这个风险了。...固定高度使用 px 像边框或者分隔线等“固定”高度的，可以使用 px。兼容多端建议使用 px 如果你的网站要兼容多端，例如手机、pad、甚至 pc。...尽量使用移动端专用的 UI 组件库 PC 端的 UI 组件库在移动端上会有很多样式 BUG，如非必要，不要使用。 5.

9772 0

单屏页面响应式适配玩法

假设浏览器可视区高度为 720px，某个元素的宽度为 300px，那应该写成多少 vh 才与 300px 相等呢，如下。...8.1、尝试 rem + vh 方案一开始想的是 rem + vh 结合使用，根元素 html 使用 vh，其他单位则使用 rem，然后找到有问题的宽高比，通过 @media 方式设置 html 为...PPPS: 是不是有点坑，应该字体的属性最小值为 12，而其他属性的值没有控制才对所以，如果使用 rem + vh 方案，在界面缩小到一定尺寸后继续缩小，有些值达到最小值固定不变，而有些值仍在变小，UI...8.2、落地方案，vh + vw + JavaScript 计算而直接在元素的属性值上设置为 vh 或 vw，所有的值都会实时变动，没有最小值（除了属性为字体有最小值），这样就最大程度减少 UI 变乱的情况了...9、移动端移动端用户是没法操作浏览器的，所以基本上都是标准的长宽比，用 vh 最合适不过了，或 vw。

2K2 0

布局常用解决方案对比(媒体查询、百分比、rem和vwvh）

简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。...px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应一、px和视口在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。...百分比单位布局应用百分比单位在布局上应用还是很广泛的，这里介绍一种应用。...百分比单位缺点从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：（1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位...各个单位具体的含义如下：单位含义vw相对于视窗的宽度，视窗宽度是100vwvh相对于视窗的高度，视窗高度是100vhvminvw和vh中的较小值vmaxvw和vh中的较大值这里我们发现视窗宽高都是100vw

2K4 0

移动端适配

对于工作量小的项目，这个方法还是简单有效的，当然没办法覆盖所有设备，只是一个没办法的办法，这样做其实很痛苦，工作量也大。...方法2：定高不定宽对于流式布局的页面，我们只要把宽度设置为百分比，而高度设置为px，这样宽度就可以自适应，高度由于是流式布局，损失一点美感，再搭配简单的媒体查询，不会对布局造成太大的影响。...不过我在工作中写的最多的是一些比较不常规的页面，比如下面的这个蛋和锤子都是用绝对定位放上去的，这个时候不管是宽度还是高度都得照顾到。...方法3：神奇的 vh、vw css3新增的单位，相对于视窗的宽度或高度，100vh代表整个可视区域，不包括标题栏状态栏底栏等区域，详细的可以看一下张鑫旭大神的文章视区相关单位vw, vh..简介以及可实际应用场景...以后的项目应该都会使用这个方案。

2.2K2 0

如何完成响应式布局，有几种方法？看这个就够了

--- 响应式布局的方法媒体查询media 使用方法使用@media媒体查询可以针对不同的媒体类型定义不同的样式...百分比% 使用方法当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，...vw/vh 使用方法 vw是将宽度设置成100份儿，给予指定份数设置宽度，vh是将高度设置成100份儿，给予指定份数设置高度。 ...优点与百分比布局很相似，但是更好用，不同属性的vh，vw效果都是一样的，都是当前窗口的宽度高度的一份儿，可以直接设置全满的高度（100vh），这是百分比做不到的，也可以用于设置字体大小。 ...，子元素设置为1em，那么结果就是32px（父元素修改成了32px），宽高设置也是如此，但还是有些属性不同，比如内边距设置成1em，他是根据最近的字体大小为依据的，他不用必须是父级，同级对字体的修改

1.1K3 0

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

vw，vh，百分比浏览器对于 vw 和 vh 的支持相对较晚，在 Android 4.4 以下的浏览器中可能没办法使用，下面是来自 Can I use 完整的兼容性统计数据， ?...响应式设计里，vw 和 vh 常被用于布局，因为它们是相对于视口的， vw，viewport width，视口宽度，所以 1vw = 1% 视口宽度 vh，viewport height，视口高度，所以...1vh = 1% 视口高度以 IPhone X 为例，vw 和 CSS 像素的换算如下， <!...这里只需要记住一点，百分比是相对于父元素的宽度和高度计算的。到这里，相信你已经掌握了响应式布局里常用的所有单位。接下来，我们介绍弹性盒和栅格，它们都不是单位，而是一种新的布局方案。...UI 库对 Grid 的实现中，通常会使用到媒体查询，这也是响应式布局的核心技术。

1.7K2 0

宝，来学习一下CSS中的宽高比，让 h5 开发更想你的夜！

在进行UI设计时，强烈建议你确切地知道你所使用的图像的宽高比是多少。使用这个网址可以帮我们快速计算。网址地址：http://lawlesscreation.github......为了找出要使用的百分比值，我们需要将图像的高度除以宽度。得到的数字就是我们要使用的百分比。假设图像宽度为260px，高度为195px。...这些缩略图的宽度和高度应该是相等的。由于某些原因，运营上传了一张与其他图片大小不一致的图片。注意到中间那张卡的高度与其他卡的高度不一样。你可能会想，这还不容易解决？...注意到在中等尺寸下，固定高度的图片从左边和右边被裁剪得太厉害，而在手机上，它们又太宽。所有这些都是由于使用了固定高度的原因。我们可以通过不同的媒体查询手动调整高度，但这不是一个实用的解决方案。...有了这个，让我们探索原始纵横比可以有用的一些用例，以及如何以逐步增强的方法使用它。渐进增强我们可以通过使用CSS @supports和CSS变量来使用CSS aspect-ratio。

1.6K3 0

如何做一个自适应网页？

（百分比、rem、em、vh、vw等）来进行，flex grid也属于自适应布局方式，另外max-width/min-width，max-height/min-height也属于弹性内容，当然内部的内容区域就需要使用比例进行书写...- 窗口高度的1%，当窗口高度减小的时候，1vh表示的大小也会对应减小 vmin - 选择最小的vw和vh vmax - 选择最大的vw和vh rem rem的方式当前是不推荐的，因为有更好的方式，rem...上，就会出现下面的效果 Pasted image 20230606174604.png 页面上并没有展示更多的内容，反而变成了更大的字和图像，并且需要通过js计算根元素font-size的大小，或者使用媒体查询进行动态设置...liquid layout.html (2).png 这种自适应的方式在切换起来很流畅，并且布局的改动在grid的加成下变得异常简单明了其实最本质的内容就是对不同的屏幕加载不同的css样式，你也可以使用媒体查询的方式加载...(md) { ... } 总结其实整体看下来如果需要只是移动端的适配的话，rem就可以，但是通过rem放大到pc端就会存在只是放大页面内容，屏效比并没有获得提升，效果还是不理想，所以更加成熟的方案就是

5072 0

移动端最佳适配解决方案

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方案。...vw即 viewport width vh即viewport height 1vw等于视图单位的1%的宽度 1vh等于视图单位的1%的高度如果设计稿的视图为375px 那么1vw 等于 3.75px...目的是为了获取到不同移动端设备下的像素比。对于rem的适配该库是至关重要的。本篇文章使用viewport适配则不再需要。...比如在设计稿为750px时使用vant组件库会将vant组件的样式缩小。解决第三方组件库兼容问题 vant组件库的设计稿是按照375px来开发的。...同理这对于其他的移动端UI组件库同样有效果。

1.3K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭