Responsive email design

A media query follows a pretty simple structure. For the purposes of email, the media query’s styles are nested within the emails <style> tag:

<style type="text/css">
    .standardCSS{
        color:#505050;
        font-size:15px;
    }

    @media only screen and (max-width:480px){
        .mediaQueryCSS{
            color:#CCCCCC;
            font-size:20px;
        }
    }
</style>

Basically a stylesheet within a stylesheet, media queries are built from a few parts:

@media only screen and (max-width:480px){
}  

The above solution works for mobile design still if it's not working you need to write the media query as inline style see the below example

<table  border="0" cellpadding="0" cellspacing="0" 
style="@media only screen and (max-width:480px){Your Css} ">