Media query doesn't work at all

After completing my whole website I was introduced to media queries as a way of making my website responsive. The thing is that even though I found many resources on Media queries and I know what to type they just don't work at all.

I first tried to test a media query in order to see how it works. This is the code:

<style> 
@media screen and (min-width:600px){

#bigfont
{
    font-size: 80px;
    line-height: 79px;
    font-family: dosis, sans-serif;
    font-weight: 300;
}
}
 </style>

"bigfont" is already a style in css. So when placing a media query it is supposed to bypass the original style and apply the new parameters.

Since my laptop screen's width was larger than 600px I was expecting it to work but it didn't. My goal is to use media queries in order to scale up my content when it comes to a really big screen.

I even changed min to max just in case with no result.

UPDATE :
I forgot to mention that I already have this:

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

Solution

Have you tried with @media all and (min-width:600px){? That usually fixed it for me.

If that does not work, try setting the values as !important (overwrites everything so far so you need to keep the !important part for larger screens, as you have min-width, and smaller if you have max-width).

    #bigfont
{
    font-size: 80px !important;
    line-height: 79px !important;
    font-family: dosis, sans-serif !important;
    font-weight: 300 !important;
}