我是 CSS 转换的新手,并试图弄清楚它是如何处理媒体查询的。
我创建了一个基本示例,其中希望我的按钮以平滑过渡向上并返回中心,但它仅以一种方式起作用:当它返回中心时不起作用。
这是一个真实的例子,可以用鼠标调整结果窗口的宽度来查看问题:
https://jsfiddle.net/hgaoe3zc/
这是我的 CSS 过渡:
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
button {
top: calc(50% - 30px);
transition: top 0.5s ease-in-out;
}
@media only screen and (max-width: 500px) {
button {
position: absolute;
top: 6rem;
}
}
任何想法都会非常感激:)
最佳答案
您需要设置position: absolute
在两个州。
https://jsfiddle.net/yo4fedq6/
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
button {
top: calc(50% - 30px);
position: absolute; // HERE
transition: top 0.5s ease-in-out;
}
@media only screen and (max-width: 500px) {
button {
top: 6rem;
}
}
<button>Button</button>
关于html - 媒体查询中的转换在两个方向都不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62224558/