当前位置: 首页 > Web前端 > CSS

图中框出一个小视频,讲讲csspadding百分比适配

时间:2023-03-30 23:10:18 CSS

今天,市场提出一个活动页面。活动页面有一段内容,在手机背景框里播放一段视频。网页是自适应的,设计师只给了我一个。带有手机壳的背景图像。如果用JS画的话应该可以,但是简单的活动页面就没必要了。用背景图片快速实现CSS是最快的。左边方框里放的视频是分两层实现的。一个是背景图片,另一个是视频。只是一开始就卡住了。当屏幕宽度发生变化时,需要适配。最好不要使用媒体查询来适配大小。你可以试试wavecsspaddingpercentage的神奇实现在下面的代码中:

css:.iphone-box{填充:171%00;位置:相对;img.iphone{位置:绝对;顶部:0;左:0;宽度:100%;高度:100%;}.video-box{位置:绝对;顶部:0;左:0;宽度:100%;高度:100%;填充:26.7%00;视频{宽度:100%;高度:100%;}}图片的父元素没有宽高,设置padding发生,父元素设置position:relative;子元素设置position:absolute;父元素包裹子元素,父元素padding设置为百分比,子元素的宽高随父元素的宽度按比例变化,不会有封面形式的截图,所以两层堆叠在父元素中的相对位置比较稳定。padding比例必须符合一个计算规则(paddingbottom+paddingtop)/(paddingleft+paddingright)===img_height/img_width当然也可以,你看顺眼就好。