在项目的商品详情页需要添加视频,移动端和PC端都需要添加,那视频播放的按钮位置自适应成了一个让我有点郁闷的问题。
先来说下PC端,本来吧,简单的使用了margin-top、margin-left,当浏览器窗口缩小时,惨了……样式乱了……
不行了吧,就找度娘问了下定位,度娘真是很给力的说“css中有一个calc”。
话不多说,先来看下具体的效果( 播放按钮需要放置到中间位置):

.img{
z-index: 99;
position: absolute;
top: calc(50% - 25%);
left: calc(50% - 11%);
}
//“ - ”前后空格一定要有,不然是不会识别的
本文探讨了在项目商品详情页中,如何利用CSS的calc属性解决视频播放按钮在不同设备屏幕上的自适应问题,确保按钮始终位于画面中央,适用于PC端和移动端。
774

被折叠的 条评论
为什么被折叠?



