CSS媒体查询在设备旋转时不会改变

Question

如果我使用 ma​​x-device-width 进行媒体查询，当我旋转我的平板电脑/手机时，媒体查询中的 css 不会生效，如果我刷新页面，那么应用了正确的样式。

如果我将媒体查询更改为 ma​​x-width，那么在平板电脑/手机上一切正常，但我会在桌面上看到整个响应过程，这是我不想要的。

我正在使用以下元标记：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

我的媒体查询是：

@media screen and (max-width:800px)
{
}
etc......

我尝试了以下方法：

• 调整数值，799px 到 801px
• 堆叠最大宽度，后跟最大设备宽度
• 将元标记更改为仅包含设备宽度

除了 max-width 之外似乎没有任何作用

如何在桌面不显示响应进程的情况下让媒体查询生效？

干杯

Answer 1

我不确定这是否是最好的方法，但您可以复制您的 css 代码并在@media 屏幕括号内放置一份副本，另一份在其外部。 例如

.css 桌面代码{

}

@media screen and (max-width:800px){

.css code for phone/tablets etc{

}

}

桌面代码可以与媒体代码完全相同，只是不嵌套在@media 屏幕括号内。这是额外的代码，但它应该确保您的桌面以您希望的方式打开，而不会影响您的其他媒体设备，反之亦然。