我有一个关于响应时块左/右边距的css问题。我需要这样写:
@media screen and (max-width: 1024px) {
body .wrapper {
width:100%;
}
}
@media (min-width: 1024px) and (max-width: 1170px) {
body .wrapper {
width:70%;
margin: 0% 5% 0% 25%;
}
}
@media (min-width: 1170) and (max-width: 1600px) {
body .wrapper {
width:65%;
margin: 0% 10% 0% 30%;
}
}
<body>
<div class="wrapper">text here</wrapper>
</body>
当我改变窗口宽度从1024px，它跳跃左距25%。是否有一种方法可以使左距从1024px平滑地增加(而不是跳跃)百分比，在1171px时，它将达到，例如200px(左距)，1600px, 300px(例如)，就像自动边距一样。例如
@media screen and (min-width: 1024px) {
body .wrapper {
width:1024px;
margin:0 auto;
}
}
如果窗口增加，包装块在中间，左右边距将平滑增加，等边距。我需要相同的，但不同的左右边距。这可能吗?谢谢你的帮助。
使用这样的东西使过渡平滑…
transition: 0.5s ease-in-out 0.5s;