Why aren't my CSS media queries working?

I am trying to make a responsive website for desktops, tablets and mobile devices but I am facing some trouble. I created a document called responsive-Ipad.css that would work only in Ipads (I set the min-width to 600px) but somehow the css files are affecting the screen content in any device (tablet, mobile or desktop). I have 3 css files. "style.css" that I use to set the desktop layout, "responsive.css" to set the mobile layout and responsive-Ipad.css for Ipads.

the style.css doesn't have media query the responsive.css starts with this line code:

@media only screen and (max-width:420px){

and the responsive-Ipad starts with this line code:

@media only screen and (min-width: 600px){

Does anyone know how to fix this?