I thnk using the media query settings you note will complicate your life because they will make it difficult to target different viewports or window widths.
@media only screen and (min-width: 480px) { ... } will target all widths 480px and above,
@media only screen and (min-width: 600px) { ... } will target all widths 600px and above.
So they will both be fighting for control whenever the viewport is 600px or higher. You could consider something like the following:
/* your default, site-wide settings followed by */
@media only screen and (max-width: 480px) { ... }
@media only screen and (min-width: 481px) and (max-width: 600px) { ... }
@media only screen and (min-width: 601px) and (max-width: 768px) { ... }
@media only screen and (min-width: 769px) and (max-width: 992px) { ... }
@media only screen and (min-width: 993px) { ... }
I'm not saying that these are perfect break points, that's often specific to your design. The important bit is the technique you use to target the different viewports.
There are different schools of thought for pixels vs percentages, and both have advantages. If you are getting up-to-speed with responsive design, personally I think it's worth spending time with some of the well established frameworks like Bootstrap or Foundation or Skeleton or one of the many others.
They are all fantastic, they will save you heaps of learning time, give you good cross-browser results, and the more you know, the easier it will be to break away from them when needed.
Good luck!