How to set a form field sizes based upon the screen size responsively? I'm building a mobile-first module in D7. I want to set the size attribute of a form (textfield, textarea) depending upon the screen size (i.e., using css media query). Is this possible?
Yes: you can use any CSS media query you want in your theme or module's CSS and affect form elements. You'll want to use a web inspector (like the built-in ones in Chrome and Safari, or Firebug for Firefox) to identify what selectors you want to target. 

If, for example, you wanted to make the text fields on the node submission form responsive, you'd target the .node-form selector in your CSS file:



@media screen and (max-device-width: 480px) {
  .node-form .form-text {
    width: 200px;
  }
}


To attach your own CSS for your module's forms (or for any form), you'll want to modify the #attached property in your form:

$css_path = drupal_get_path('module', 'mymodule') . '/css/mymodule-style.css';
$form['#attached']['css'][$css_path] = array('media' =&gt; 'screen');


Where mymodule is replaced with the short name of your module. The #attached property is an array of CSS files: if you don't need to modify any options, you can just do:

$form['#attached']['css'][] = $css_path;


Otherwise, you'd set the key to $css_path and the value to an array that mimics the $options array for drupal_add_css(). 

If you wanted to modify existing forms, you'd do the same thing but in a form alter function. For example, if you wanted to add your custom CSS to the node submission form, you'd do:

function mymodule_form_node_form_alter(&amp;$form, $form_state) {
  $css_path = drupal_get_path('module', 'mymodule') . '/css/mymodule-style.css';
  $form['#attached']['css'][$css_path] = array('media' =&gt; 'screen');
}