Will loading a different logo (perhaps something resized from the original in photoshop or other tool) work for you instead of resizing the existing one with CSS? Here is how to do it the easy way by inserting this code in the Custom CSS tab of the options panel –
@media only screen and (max-width: 479px) {
#site-title a { background-image: url("http://example.com/wp-content/uploads/2013/02/mobile-logo.png") !important;}
}
For tablets –
@media only screen and (max-width: 767px) {
#site-title a { background-image: url("http://example.com/wp-content/uploads/2013/02/tablet-logo.png") !important;}
}