Creating responsive Drupal theme (Simplified)

There are various ways to create a responsive Drupal theme, one of them is using template_preprocess_html() function in template.php.

First create template.php if your theme do not already have it. Than add below codes:

/**
* Preprocess html
*/
function themename_preprocess_html(&$vars) {

  drupal_add_css(path_to_theme() . '/css/smartphone.css', array('group' => CSS_THEME, 'media' => 'only screen and (min-width : 240px) and (max-width : 480px)', 'preprocess' => FALSE));

  $meta_viewport = array(
   '#type' => 'html_tag',
   '#tag' => 'meta',
   '#attributes' => array(
     'name' => 'viewport',
     'content' => 'width=device-width, initial-scale=1'
   )
  );

  drupal_add_html_head($meta_viewport, 'viewport');
}

It is clear if the minimum screen size of 240px and 480px maximum it will use smartphone.css, so please create smartphone.css in css folder and you can add your css code there.

Besides using template.php, you can also add the css via theme's info file like below

stylesheets[screen and (min-width: 240px) and (max-width: 480px)][] = css/smartphone.css
stylesheets[screen and (max-width: 320)][] = css/320.css

And do not forget to add meta viewport via template.php or Android devices will not recognize our responsive layout.

Clear your Drupal cache, once you make above changes.