Few days ago we(team) finished responsive-design site, what we done is simply write your desctop css in your css files like(blocks.css, field.css, node.css, etc..) and for ipad/smartphone version we used another css styles for portait and landscape versions like this:
ipad-landscape.css
ipad-portrait.css
ipad.css
smartphone-landscape.css
smartphone-portaint.css
smartphone.css
And int html.tpl.php
<!--[if !IE]>-->
<link media="only screen and (max-width : 480px)" href="/sites/all/themes/acro/css/layouts/responsive/smartphone.css" rel="stylesheet" type="text/css">
<link media="only screen and (min-width : 321px) and (max-width : 480px)" href="/sites/all/themes/acro/css/layouts/responsive/smartphone-landscape.css" rel="stylesheet" type="text/css">
<link media="only screen and (max-width : 320px)" href="/sites/all/themes/acro/css/layouts/responsive/smartphone-portrait.css" rel="stylesheet" type="text/css">
<link media="only screen and (min-width : 481px) and (max-width : 1024px)" href="/sites/all/themes/acro/css/layouts/responsive/ipad.css" rel="stylesheet" type="text/css">
<link media="all and (min-width: 769px) and (max-width: 1024px), all and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape)" href="/sites/all/themes/acro/css/layouts/responsive/ipad-landscape.css" rel="stylesheet" type="text/css">
<link media="all and (min-width: 481px) and (max-width: 768px), all and (min-width: 481px) and (max-width: 768px) and (orientation: portrait)" href="/sites/all/themes/acro/css/layouts/responsive/ipad-portrait.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
for specific pages we wrote css in this files.
Update Also we use sass and compass for css styles.