Question

我有一个带有一些样式和固定宽度的div用于大屏幕：

.div {
    width: 1600px;
    transition: width 0.5s
}

我正在使用固定宽度较小的媒体查询来缩小屏幕：

@media only screen and (max-width: 1000px) {
    .div {
        width: 400px;
    }
}

我的问题是当我进入网站（不刷新）时，如果浏览器宽度大于1000px，动画将启动（div从400px到1600px）！

我尝试将转换添加到媒体查询中，但是当我调整浏览器大小（小于400px到400px以上）时，转换将不起作用，这是正常的。

我无法理解为什么浏览器在媒体查询中使用样式时与浏览器不匹配！

请使用一个非常基本的示例检查此网址：

https://octamerous-hunts.000webhostapp.com/

更新我刚刚在Mozilla和Chrome上测试过它没有问题，实际上只有在我使用IE和Edge时才会出现问题！

代码：

<head>

    <style>

        .div1 {
            position: relative;
            width: 1400px;
            height: 200px;
            left: 50%;
            margin-left: -700px;
            background-color: royalblue;
            transition: width 0.5s, margin-left 0.5s;
        }


        @media only screen and (max-width: 1399px) {
            .div1 {
                width: 1000px;
                margin-left: -500px;
            }
        }

    </style>

</head>


<body>

    <div class="div1">



    </div>

</body>

更新2

我发现了一个类似的问题：

IE/Edge - CSS3 transitions firing on navigate

但提供的解决方案不起作用！

更新3

我找到了解决方案：

IE11 triggers css transition on page load when non-applied media query exists

解决了IE和Edge的问题！

CSS查询和转换在IE和Edge中无法正常工作

0 个答案: