You can use something like
@media screen and (max-width: 500px) {
body { font-size: 12px;}
}
to set different rules for different resolutions
And add <meta name="viewport" content="width=device-width" />
to the html head, since otherwise some mobile browsers will evaluate the css pixels as if they had a bigger screen resolution (in order to display pages designed for bigger screens more or less correctly).