Question

I am using the following css code in my html file.

        <style>
            body{
            background: black;
            color: #fff;
            font: normal 62.5%/1.5 tahoma, verdana, sans-sarif;
        }

        h1{font-size: 2em;}
        p{font-size: 1.4em;}

        <!-- styles for smartphones and very small screen resolution -->
        @media only screen and (min-width: 320px) and (max-width: 400px)
        {
         body{background: blue;}
        }

        <!-- styles for screen resolution bigger than smartphones but smaller or equal to 1024px -->
        @media only screen and (min-width: 401px) and (max-width: 1024px)
        {
            body{background: red;}
        }

        <!-- styles for screen resolutions for a very wide resolution -->
        @media only screen and (min-width: 2000px)
        {
            body{background: green;}
        }
    </style>

I read that the code will work according to screen resolution.

Will this CSS depend on size of Browser window? or screen resolution of my system will be counted here?

I am changing the size of my browser window and reload the file, there is no change in UI/design of page. I cleared the cache too.

Thanks.

Answer 1

it’s the browser window.
Here a a nice article about how to do it.

http://css-tricks.com/css-media-queries/

for instance the term “screen” is related to the output (media) not the actual screen hardware.
It could be replaced by “print” for instance and it would be used when printing the file.