Search code examples
resolutionmedia-queriescss

Does CSS Media Queries work locally?

I was looking for my answer @ CSS media query but couldn't find it so I thought I would ask here.

Can CSS media queries be used offline/locally? I'm building a webpage it's all on shared network drives and I'm trying to setup different stylesheets based on resolution and I want to use CSS media queries min-width but they don't seem to be working and I'm wondering if it's because my site isn't live? (similar to how favicon doesn't work locally, only on hosted sites).

An example would be:

    <style type="text/css">
        @media all and (min-width: 1024px) {
            background-image: url(images/bigbg.jpeg);
        }
        body {
            width: 1000px;
            background-image:url('images/test.PNG');
            background-repeat:repeat;
            overflow-x:scroll;
        }
    </style>

Any suggestions? Much appreciated :)

Solution

  • Should work locally, but you need to define what's changing. Try:

    Original:

    @media all and (min-width: 1024px) {
        body {background-image: url(images/bigbg.jpeg);}
}

    Even better:

    @media all and (min-width:1024px){
        body{background:url(images/bigbg.jpg)}
}