Html 调整窗口大小时调整元素大小

如果调整页面大小，我们如何调整播放按钮元素的大小

如果页面变小，我希望播放按钮变小

我想在调整屏幕大小时调整播放按钮的大小

这对我来说有点复杂，所以任何帮助都将不胜感激

.videoContainer{
垫面：14rem；
}
.视频播放按钮{
位置：相对位置；
z指数：10；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
框大小：内容框；
显示：块；
宽度：32px；
高度：44px；
/*背景#fa183d*/
边界半径：50%；
填充：18px 20px 18px 28px；
-网络工具包盒阴影：0px 2px 5px 0px rgba（0,0,0,0.75）；
-moz盒阴影：0px 2px 5px 0px rgba（0,0,0,0.75）；
盒影：0px 2px 5px 0px rgba（0,0,0,0.75）；
}
.视频播放按钮：之前{
内容：“；
位置：绝对位置；
z指数：0；
左：50%；
最高：50%；
转化：translateX（-50%）translateY（-50%）；
显示：块；
宽度：80px；
高度：80px；
背景：#ba1f24；
边界半径：50%；
}
.视频播放按钮：之后{
内容：“；
位置：绝对位置；
z指数：1；
左：50%；
最高：50%；
转化：translateX（-50%）translateY（-50%）；
显示：块；
宽度：80px；
高度：80px；
背景#fa183d；
边界半径：50%；
过渡：所有200ms；
}
.视频播放按钮：悬停：之后{
背景色：变暗（fa183d，10%）；
}
.视频播放按钮img{
位置：相对位置；
z指数：3；
最大宽度：100%；
宽度：自动；
高度：自动；
}
.视频播放按钮跨度{
显示：块；
位置：相对位置；
z指数：3；
宽度：0；
身高：0；
左边框：32px实心#fff；
边框顶部：22px实心透明；
边框底部：22px实心透明；
}
.波浪挡块{
位置：绝对位置；
浮动：中心；
宽度：384px；
宽度：24rem；
高度：384px；
高度：24雷姆；
左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
z指数：1；
}
.波浪阻挡.波浪{
位置：绝对位置；
宽度：24rem；
高度：24雷姆；
背景：rgb（1781632140.2）；
不透明度：0；
边界半径：320px；
-webkit动画：波浪3缓进无限出；
动画：波浪在无限的范围内缓进缓出；
}
.波浪阻塞。波浪-1{
-webkit动画延迟：0秒；
动画延迟：0s；
}
第二波{
-webkit动画延迟：1s；
动画延迟：1s；
}
.波浪阻塞。波浪-3{
-webkit动画延迟：2s；
动画延迟：2s；
}
@为波浪设置关键帧{
0% {
-webkit变换：比例（0.2,0.2）；
变换：比例（0.2,0.2）；
不透明度：0；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
}
50% {
不透明度：0.9；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=90）”；
}
100% {
-webkit变换：比例（0.9,0.9）；
变换：比例（0.9,0.9）；
不透明度：0；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
}
}

---

我以前看过你对这个问题的回答。并且已经写下了答案。请看一看，也许你会明白一些事情

使用所有这些设置

。视频播放按钮
应为
位置：绝对

已更新

重写了%scales的
视频播放按钮的所有内部元素

现在主要的魔法就在这里。
vw
是视口宽度<代码>7vw
=视口的7%

.video-play-button {
  width: calc(20px + 7vw);
  height: calc(20px + 7vw);
}


.videoContainer{
文本对齐：居中；
}
.视频播放按钮{
位置：绝对位置；
z指数：10；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
显示：块；
宽度：计算（20px+7vw）；
高度：计算（20px+7vw）；
/*背景#fa183d*/
边界半径：50%；
-webkit盒阴影：0px 2px 5px 0px rgba（0,0,0,0.75）；
-moz盒阴影：0px 2px 5px 0px rgba（0,0,0,0.75）；
盒影：0px2px5px0pxRGBA（0,0,0,0.75）；
}
.视频播放按钮：之前{
内容：“；
位置：绝对位置；
z指数：0；
左：0；
排名：0；
显示：块；
宽度：100%；
身高：100%；
背景：#ba1f24；
边界半径：50%；
}
.视频播放按钮：之后{
内容：“；
位置：绝对位置；
z指数：1；
左：0；
排名：0；
显示：块；
宽度：100%；
身高：100%；
背景#fa183d；
边界半径：50%；
过渡：所有200ms；
}
.视频播放按钮：悬停：之后{
背景色：变暗（fa183d，10%）；
}
.视频播放按钮img{
位置：相对位置；
z指数：3；
最大宽度：100%；
宽度：自动；
高度：自动；
}
.视频播放按钮跨度{
显示：块；
位置：绝对位置；
左：54%；
最高：50%；
转化：translateX（-50%）translateY（-50%）；
z指数：3；
宽度：40%；
身高：45%；
背景：#fff；
剪辑路径：多边形（0,0%100%，100%50%）；
}
.视频盒计算机{
位置：相对位置；
显示：内联块；
宽度：45%；
顶部：180像素；
}
.视频图像{
宽度：100%；
}
.波浪挡块{
位置：绝对位置；
宽度：500%；
身高：500%；
左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
z指数：1；
}
.波浪阻挡.波浪{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：rgb（1781632140.2）；
不透明度：0；
边界半径：50%；
-webkit动画：波浪3缓进无限出；
动画：波浪在无限的范围内缓进缓出；
}
.波浪阻塞。波浪-1{
-webkit动画延迟：0秒；
动画延迟：0s；
}
第二波{
-webkit动画延迟：1s；
动画延迟：1s；
}
.波浪阻塞。波浪-3{
-webkit动画延迟：2s；
动画延迟：2s；
}
@为波浪设置关键帧{
0% {
-webkit变换：比例（0.2,0.2）；
变换：比例（0.2,0.2）；
不透明度：0；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
}
50% {
不透明度：0.9；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=90）”；
}