如何在无需刷新页面的情况下为不同的媒体更改 css

Question

我已经成功地让我的页面看起来如何寻找不同大小的页面。我使用它来确保动画停留在页面上使用百分比的正确位置。

我为每个不同的尺寸使用 @media(min-width: ---px)。但是，页面刷新后，页面将只接受不同尺寸的媒体css。

有没有办法解决这个问题，禁用任何缓存设置或任何东西。我会理解为什么 @media 适用于不同尺寸的设备，而不是同一设备上的不同尺寸页面，但它会解决我的问题。

#car {
    max-width: 10%;
    max-height: 10%;
    z-index: 2;
    -webkit-animation-name: drive;
    -webkit-animation-duration: 4s;
    animation-name: drive;
    animation-duration: 4s;
    animation-iteration-count:infinite;
}

@-webkit-keyframes drive {
    0%   {left:-10%; top: 15%;}
    100%  {left:110%; top: 15%;}
}

@media(min-width: 750px) {
    @-webkit-keyframes drive {
        0%   {left:-10%; top: 16%;}
        100%  {left:110%; top: 16%;}
    }
}

@media(min-width: 850px) {
    @-webkit-keyframes drive {
        0%   {left:-10%; top: 16%;}
        100%  {left:110%; top: 16%;}
    }
}

@media(min-width: 950px) {
    @-webkit-keyframes drive {
        0%   {left:-10%; top: 17%;}
        100%  {left:110%; top: 17%;}
    }
}

@media(min-width: 1050px) {
    @-webkit-keyframes drive {
        0%   {left:-10%; top: 18%;}
        100%  {left:110%; top: 18%;}
    }
}

@media(min-width: 1150px) {
    @-webkit-keyframes drive {
        0%   {left:-10%; top: 18%;}
        100%  {left:110%; top: 18%;}
    }
}

@media(min-width: 1250px) {
    @-webkit-keyframes drive {
        0%   {left:-10%; top: 19%;}
        100%  {left:110%; top: 19%;}
    }
}

@media(min-width: 1350px) {
    @-webkit-keyframes drive {
        0%   {left:-10%; top: 20%;}
        100%  {left:110%; top: 20%;}
    }
}

Answer 1

@media(min-width: ---px) 为不同大小的页面设置样式。在哪个设备上并不重要。尝试调整浏览器 window 的大小，您将看到它如何（以及何时）适用。

为了方便起见，Chrome 和 Firefox 有一个特殊的工具可以在设备模拟下查看页面。但是您的 CSS 规则仍然仅适用于 window 大小的仿真，不适用于设备。

顺便说一句：Chrome 在仿真期间发送一些额外的 headers，但不适用于 CSS。

如何在无需刷新页面的情况下为不同的媒体更改 css

How to change css for different media without the page having to be refreshed

html

css

media-queries

browser-cache

animate.css