CSS automatically resize fonts for different resolutions and browser sizes

I've recently been rebuilding a website and getting my web design skills up to scratch. One of the problems that I've had to deal with is automatic resizing of elements on an page when faced with mobile devices and different browser/screen sizes. With a little help from the forums on the Stack Overflow website I've managed to coble together this handy piece of CSS that seems to do the job. It might not be perfect as I'm still learning advanced CSS, but for a quick easy solution it does the job:

@media screen and (max-width:767px) {
    .content1, .content2, .content3 {
        font-size: 70%;
    };
}

@media screen and (min-width:768px) {
    .content1, .content2, .content3 {
        font-size: 80%;
    };
}

@media screen and (min-width:992px) {
    .content1, .content2, .content3 {
        font-size: 90%;
    };
}

@media screen and (min-width:1200px) {
    .content1, .content2, .content3 {
        font-size: 100%;
    };
}