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

当父分区宽度为80vw时,如何设置设备宽度为100vw的子分区

当父分区宽度为80vw时,要设置设备宽度为100vw的子分区,可以使用以下方法:

  1. 使用CSS的calc()函数:可以通过计算来设置子分区的宽度。计算公式为:子分区宽度 = (100vw / 80vw) * 100%。具体的CSS代码如下:
代码语言:txt
复制
.child {
  width: calc((100vw / 80vw) * 100%);
}
  1. 使用CSS的flexbox布局:可以使用flexbox布局来实现自适应宽度。将父分区设置为display: flex,并且设置flex-wrap: wrap,子分区设置为flex: 1。具体的CSS代码如下:
代码语言:txt
复制
.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1;
}

这样设置后,子分区的宽度会根据父分区的宽度自动调整,保持设备宽度为100vw。

请注意,以上方法是基于CSS的解决方案,适用于前端开发中的响应式布局。在实际应用中,可以根据具体情况选择合适的方法来设置子分区的宽度。

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

相关·内容

【学习图片】11.描述性语法

缩小以适应400个逻辑像素宽布局空间,该800像素图像源具有双倍像素密度 - 在具有DPR2显示器上,它看起来很清晰。...浏览器发起这些请求,除了标记语言之外,它对页面本身没有任何信息 - 它甚至可能尚未启动对外部样式表请求,更别提应用它们了。..."> 这里,sizes 值告诉浏览器,我们布局中 img 占用空间宽度 80vw - 视口宽度 80%。记住,这不是一个指令,而是图像在页面布局中大小描述。...当我们把我们宽度除以它,我们得到1.25、2.5和4.1666666667。在这个视口大小下,小型small.jpg将在1x设备上选择,而medium.jpg 将在2x设备上匹配。...浏览器可以无缝地缩小它已经拥有的图像源,为什么要为一个看起来相同源发出新请求呢?但是,如果用户将其视口缩放到需要新图像才能避免缩放程度,那么仍将进行该请求,以便一切看起来符合我们期望。

1.1K20

【震惊】padding-top百分比值参考对象竟是级元素宽度

如何设置让元素A高度始终宽度一半呢?上代码~ 页面布局:要考虑DOM结构和CSS样式 <!...margin左右间距10px */ margin: 0 10px; background: #F00; /* 设置宽度100vw,实际宽度会受到弹性盒子影响 *...探究padding-top秘密 padding-top百分比,参考对象是级元素宽度 这句话圈起来,是重点,要考~ <!...margin左右间距10px */ margin: 0 10px; background: #F00; /* 设置宽度100%,级容器宽度100%,实际宽度会受到弹性盒子影响...最后秘密 padding-top、padding-bottom、margin-top、margin-bottom属性设置百分比,参考对象都是级元素宽度 要记住呀,下回还得考~ 以上就是胡哥今天给大家分享内容

1.4K10

响应式图像

,不管viewport宽度如何,始终保持相同宽度。...在viewport宽度小于960像素,使图像宽度viewport宽度75%。viewport大于960像素,使图像宽度640像素。 vm ? 处理宽度时候,%单位更合适。...如果页面延伸超过视口高度——滚动条出现——视窗宽度将会大于html元素宽度。 因此,如果你将一个元素设置100vw,这个元素将会延伸到html和body元素范围之外。...在这个例子中,我用红色边框包裹html元素,然后给section元素设置背景颜色。 ? 因为这个细微差别,使一个元素横跨整个页面的宽度,最好使用百分比单位而不是视口宽度。 2....因为用百分比定义元素大小是由它元素决定,只有元素也填满整个屏幕高度我们才能拥有一个填满整个屏幕高度元素。

2.5K10

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

=no"> Viewport 属性: 属性 含义 取值 width 定义视口宽度,单位像素 正整数或 device-width(设备宽度) height 定义视口高度,单位像素 正整数或 device-height...=1, minimum-scale=1"> 如何合理设置 rem 大小呢?...实际开发中,应该以 rem 单位基础,同时结合其他单位协同工作。 vw 适配 vw 是一个相对于 viewport 单位,100vw 就等于 viewport 宽度。...页面需要适应不同屏幕大小以及设备类型确保元素拥有恰当行为布局方式,提供一种更加有效方式来对一个容器中元素进行排列、对齐和分配空白空间。...Flexbox 布局两个基本概念: 容器:弹性布局元素(display=flex元素)。 项目:弹性布局容器中每一个元素。

98240

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

:4:3, 5:3 智能手机屏幕尺寸和分辨率列表 4.常见布局 4.1 百分比布局 改变窗口高度和宽度,通过给出 height, width, padding, border, 和 margin..., and padding-bottom 百分比值不是指容器高度,而是指容器宽度)。...如果元素顶部和底部设置了百分比,它将相对于元素高度,并直接进行非静态定位(默认定位)。同样,如果元素左侧和右侧设置了百分比,它将与元素宽度直接非静态定位(默认定位)相对应。...如果子元素 padding 和 margin 设置百分比,无论是垂直还是水平,它们都是相对于直接元素宽度而言,与元素高度无关。...4.4 VW、VH 响应式布局 因为 100vw = 100 视图窗口宽度,100vh = 100 视图窗口高度,那么根据 750 设计草案,100vw 就是 750。

20520

浅谈 Web 图像优化

响应式图片 响应式图片可以结合懒加载形式,这样可以加强网页体验。很多网站 logo 就是一个固定宽度图像例子,不管浏览器视口宽度如何,始终保持相同宽度。...,分别为 360 768 1200 1920 size:我们来告诉浏览器,在不同环境下图像宽度 视口不大于 360 ,图像宽度 100vw视口大于 768 ,图像显示 90vw,以此类推...demo: iphone4(320)下,图像宽度和我们设置 100vw 一致,而浏览器选择是 768 图像没有选择 360 图,因为 iphone4 dpr 是 2,浏览器智能地选择了合适...视口大于 960 像素,会加载 960.jpg。大于 768 像素,会加载 768.jpg。视口小于768,则加载默认图像。...块中有另外一个块会先设置一个 padding-bottom 来撑起块高(即保证需要加载图像也是这个宽度高度比例)。这样防止图片在加载发生重排。 加载一个轻量版图片。

1.4K90

【CSS】318- CSS实现宽高等比自适应容器

在最近开发移动端页面,遇到这么一个情况:页面宽度 100% ,高度宽度一半,并随手机宽度变化依然是一半。 于是我们就需要实现一个宽度自适应,高度宽度一半容器。...这里先以高度宽度一半例,也可以是其他任意比例。 一、思考如何实现 这个问题类似于:我们在移动端页面,上面有一张宽度 100% 图片,如果我们没设置高度,则图片会根据原有尺寸,等比缩放。...二、实现方法1 - 通过 vw 视口单位实现 所谓视口单位(viewport units)是相对于视口(viewport)尺寸而言, 100vw 等于视口宽度 100%,即 1vw 等于视口宽度...三、实现方法2 - 通过元素 padding 实现 通过设置元素 padding 属性来实现,是比较常用,也是效果比较好一种,这里需要理解是:元素 padding 属性百分比值是先对容器宽度而言...分析: 这里我们将容器 .box 宽度设置 200px,元素 .text padding:10% ,因此 .box padding 计算结果 20px; 接下来结合主题,我们利用这个原理

1.1K30

【复习】CSS实现宽高等比自适应容器

在最近开发移动端页面,遇到这么一个情况:页面宽度 100% ,高度宽度一半,并随手机宽度变化依然是一半。 于是我们就需要实现一个宽度自适应,高度宽度一半容器。...这里先以高度宽度一半例,也可以是其他任意比例。 一、思考如何实现 这个问题类似于:我们在移动端页面,上面有一张宽度 100% 图片,如果我们没设置高度,则图片会根据原有尺寸,等比缩放。...二、实现方法1 - 通过 vw 视口单位实现 所谓视口单位(viewport units)是相对于视口(viewport)尺寸而言,100vw 等于视口宽度 100%,即 1vw 等于视口宽度 1%...:元素 padding 属性百分比值是先对容器宽度而言。....box 宽度设置 200px,元素 .text padding:10% ,因此 .box padding 计算结果 20px; 接下来结合主题,我们利用这个原理,来实现等比例问题:

1.6K00

web图像常见应用策略与技巧

就是固定宽度图像一个例子,不管viewport宽度如何,始终保持相同宽度。...,图像显示宽度100vw视口不大于768时候,图像显示宽度90vw,以此类推。...这样说不够直观,我们看个demo 在iphone4(320)下,图像宽度和我们设置100vw一致,但是为什么浏览器选择了768图像而没有选择360?...source浏览器提供了要显示图像供选版本。 适用场景:在一个精确特定转效点(breakpoint)需要显示一个特定图像。使用picture元素选择图像,不会有歧义,理解起来也更直观。...viewport宽度大于768像素,浏览器会加载768。而宽度小于768像素,加载默认图像360。

1.6K30

web图像常见应用策略与技巧

,很多网站logo就是固定宽度图像一个例子,不管viewport宽度如何,始终保持相同宽度。...img标签信息 srcset,我们给浏览器准备了四个质量图像,分别为360 768 1200 1920 sizes,我们来告诉浏览器,在不同环境下图像宽度 视口不大于360时候,图像显示宽度...100vw视口不大于768时候,图像显示宽度90vw,以此类推。...在iphone4(320)下,图像宽度和我们设置100vw一致,但是为什么浏览器选择了768图像而没有选择360?因为4dpr是2呀^_^,浏览器很智能选择了质量最合适768....viewport宽度大于768像素,浏览器会加载768。而宽度小于768像素,加载默认图像360。

1.5K10

如何决定响应式网站 CSS 单位?

在我们创建适合各种设备响应式网站,了解正确CSS 单位很重要。不过在深入研究决策之前,让我们先对它们进行分类以便了解它们用途。 如何决定响应式网站 CSS 单位?...% 单位 这用于设置元素宽度,它总是相对于其直接元素大小。如果没有定义级,则默认情况下body被视为级。...如果未覆盖,默认字体大小 16px,假设在元素中字体大小 48px,那么在元素中 1em == 48px。...所以,如果 1vw == 1% 那么 100vw == 100% 视口宽度。 让我们考虑以下示例,其中一个子项宽度相对于大小,而另一个子项宽度相对于根。...让我们考虑以下示例,其中一个高度与级大小有关,而另一个高度与根相关。

94410

web图像常见应用策略与技巧

,很多网站logo就是固定宽度图像一个例子,不管viewport宽度如何,始终保持相同宽度。...时候,图像显示宽度100vw视口不大于768时候,图像显示宽度90vw,以此类推。...在iphone4(320)下,图像宽度和我们设置100vw一致,但是为什么浏览器选择了768图像而没有选择360?因为4dpr是2呀^_^,浏览器很智能选择了质量最合适768....source浏览器提供了要显示图像供选版本。 适用场景:在一个精确特定转效点(breakpoint)需要显示一个特定图像。使用picture元素选择图像,不会有歧义,理解起来也更直观。...viewport宽度大于768像素,浏览器会加载768。而宽度小于768像素,加载默认图像360。

1.8K90

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

前天,在往博客上折腾B站视频,无意间灵机一动,想到了个好主意,就是使用vw单位,配合使用calc。...只需级行css就解决了 核心css代码,锁死视频比例16:9 embed { height: calc(9 * 100vw/ 16);width: 100%; } 宽度设置100%,宽度铺满级div...【假设级div就是真个屏幕】,高度设置屏幕宽度乘以9/16。...因为刚刚【假设级div就是真个屏幕】这样假设了下,实际用起来肯定是多种情况,比如我博客电脑端是有侧边栏,文章div也是有边距,而手机端只有边距没有侧边栏。其实只需要做个数学题就好。...: calc(9 * 100vw/ 16);width: 100%;} } 其实就是对于电脑端设备,在宽度设置上,提前减去330px,然后在乘9/16。

1K30

响应式网站应该如何选择 CSS 单位?

在开发需要适配各种设备响应式网站,正确了解 CSS 范围很重要。...百分比 用于设置元素宽度,它总是相对于其直接元素大小。如果没有定义级,则默认情况下 body 会被视为级。...em em 总是相对于它直接字体大小。1em == 字体大小大小。如果没有覆盖,默认字体大小 16px,假设在元素中字体大小 48px,然后在元素中 1em == 48px。...所以,如果 1vw == 1% 那么 100vw == 100% 视口宽度。 让我们考虑以下示例,其中一个子项宽度相对于大小,而另一个子项宽度相对于根。...让我们考虑以下示例,其中一个元素高度与级大小有关,而另一个元素高度与根相关。

1.8K10

探讨移动端适配

就相同大小屏幕而言,屏幕分辨率低(例如 640 x 480),在屏幕上显示像素少,单个像素尺寸比较大。...要知道我们显示器物理像素1280 浏览器窗口放大两倍,视口宽度变成了640 与物理像素正好是2倍关系 此时得出结论“ 1CSS像素等于2个物理像素”,这里只是一个单向关系,实际上应该是4个物理像素显示...这个比率1:1,使用1个设备像素显示1个CSS像素。这个比率2:1,使用4个设备像素显示1个CSS像素,这个比率3:1,使用9(3*3)个设备像素显示1个CSS像素。....vh:1vh等于视口高度1% 如100vw 在视口宽度 375px大小时渲染处理盒子宽度 375px vw,vh与百分比不同vw,vh永远相当于视口宽度,而百分比是相当于元素宽度...{ font-size: 5.33333vw } 由于我们将1pxvw扩大了40倍在进行元素宽度设置时候我们要将设计稿测定px除以40在进行设置 如我们测得设计稿某元素宽度 48px ,

1.3K10

网站自适应布局为什么我要抛弃rem,改用vw?

页面中所有元素都使用rem单位,你只需要改变根元素font-size值,所有元素就会按比例放大或者缩小。...若使用vw布局,就不需要再像rem那样,在js中去动态设置根元素font-size了,sass中只需要使用这个函数做转换即可 //以iphone7尺寸@2x 750像素宽视觉稿例 @function... vw($px) {     @return ($px / 750) * 100vw; } //假设一个div元素在视觉稿中,宽度120px,字体大小12px div {     width: vw...百分比%是根据元素宽度或者高度进行计算,而vw vh固定按照viewport来计算,不会受元素宽高度影响。...100vw包括了页面滚动条宽度(页面滚动条属于viewport范围内,100vw当然包括了页面滚动条宽度)。但把body或者html设置width:100%,是不包括页面滚动条宽度

3.1K10

盘点:响应式布局5种实现方式

但是 padding、border、margin 等属性情况又不一样 1、元素 top 和 bottom 如果设置百分比,则相对于直接非 static 定位(默认定位)元素高度,同样,元素...left 和 right 如果设置百分比,则相对于直接非 static 定位(默认定位元素宽度。...2、元素 padding 和 margin 如果设置百分比,不论是垂直方向或者是水平方向都相对于直接父亲元素 width,而与元素 height 无关。...border-radius 百分比,则是相对于自身宽度 缺点: 计算困难,如果我们要定义一个元素宽度和高度,按照设计稿,必须换算成百分比单位。...弹性布局在元素上都有相对应属性来规范元素在元素中 “ 弹力 ”。

2.1K00

详细聊一聊如何使用响应式图片,提升网页加载速度

如果您使用是Windows操作系统,可以右键单击图像,选择属性,而在Mac上应该有一个名为"获取信息"选项。在本例中,图像宽度400像素,因此我们将宽度设置400w。...默认情况下,如果您没有将sizes属性添加到img标签中,它会假定尺寸100vw,这就是为什么上面的图像根据浏览器窗口完整宽度进行缩放。...第一部分是我们要检查媒体查询。在这种情况下,我们要检查屏幕宽度是否小于800像素。第二部分是如果媒体查询true我们要使用尺寸。...原因是浏览器在不知道元素宽度之前,无法确定百分比定义内容宽度。这意味着浏览器必须等到整个页面加载完成后才能确定要下载哪个图像。...但是,您希望在不同屏幕尺寸上显示不同图像,这可能会成为一个问题,这就是为什么picture元素是理想选择。

40030

H5移动端开发学习总结

px是相对长度单位,相对设备物理像素(device pixel) 注意:在旧屏幕上,缩放程度100%,一个CSS像素等于一个设备像素。...举个例子: 给一个元素设置width:200px,到底会发生什么事情? 这个width200px元素跨越了200个CSS像素。...这个比率1:1,使用1个设备像素显示1个CSS像素。这个比率2:1,使用4个设备像素显示1个CSS像素,这个比率3:1,使用9(33)个设备像素显示1个CSS像素。...但是屏幕超过一定尺寸以后还继续显示h5页面的话会给用户带来不好体验。因此,我们需要给页面设置最大宽度和最小宽度。...calc(100vw / 3.75); } 除以3.75这里是以iphone6设计稿标准100vw表示设备宽度

95820

iOS开发中行高灵活可变UITableView性能优化

以iOS9例,一行cell要展示在屏幕上,至少要执行5遍TableViewheightForRowAtIndexPath方法: TableView配置部分: ① TableView视图即将展现在屏幕上...,具体如何操作比较灵活,可以对应一个数组属性,将计算后行高放入数组中,每次取行高,检查数组中是否已经有计算过行高数据,如果有直接返回。...例如下图所示,左侧图标进行了与视图左侧距离约束,标题Label进行了与视图上侧距离约束和右侧距离约束,内容Label进行了与标题Label上侧约束和与视图下册约束,并且对宽度进行了约束。...或者不同行 设置估计行高 return 44; } 关于estimatedHeightForRowAtIndexPath方法其实还有一种应用场景,前面介绍优化方式都是以Autolyout前提...分区视图设置方式与头视图一样。

1.9K20
领券