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

Question

I have successfully gotten my page to look how I'd like it to look for different size pages. I'm using it to ensure an animation stays in the right place on a page uses percentages.

I'm using @media(min-width: ---px)for each different size. However the page will only accept the different size media css after the page is refreshed.

Is there any way around this, disabling any cache settings or anything. I would understand why as the @media is for different size devices not different size pages on the same device however it would solve my problem.

#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) sets styles exactly for differnt size page. It doesn't matter, on which device. Try to resize a browser window and you will see, how (and when) it applies.

For convenience, Chrome and Firefox have a special tools for view the page under emulation of devices. But your CSS rules still works only for size of window of emulation, not device.

BTW: Chrome sends some additional headers during emulation, but it does not apply to CSS.