Question

我正在使用以下CSS更改DIV的宽度：

div { width:100px; }

@media only screen and (min-width: 400px) {
    div { width:300px; }
}
@media only screen and (min-width: 600px) {
    div { width:500px; }
}

是否可以使用CSS过渡来将宽度变化设置为300到500和500到300，而无需将更改设置为100到300和300到100？

JSFiddle

Answer 1

~~您可以将过渡放在最后一个媒体查询http://jsfiddle.net/T7A5v/1/~~

上

编辑：我明白你的意思了，你可以尝试一下：http://jsfiddle.net/T7A5v/2/诀窍是过渡min-width代替width本身。

div {
    background: red;
    width: 100px;
}

@media only screen and (min-width: 400px) {
    div {
        width: 300px;
        min-width: 300px;
        -webkit-transition: min-width 3s;
        -moz-transition: min-width 3s;
        -o-transition: min-width 3s;
        transition: min-width 3s;
    }
}

@media only screen and (min-width: 600px) {
    div {
        min-width: 500px;
        -webkit-transition: min-width 3s;
        -moz-transition: min-width 3s;
        -o-transition: min-width 3s;
        transition: min-width 3s;
    }
}

将CSS3过渡应用于某些媒体查询，但不是全部

1 个答案: