移动端自适应处理--css3 @media

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://www.w3cplus.com/content/css3-media-queries

The @media rule is used to define different style rules for different media types/devices.

Two syntax---only|not is not always necessary

@media not|only mediatype and (media feature) {
    CSS-Code;
}

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

To use the @media rule to make responsive design,such as

@media only screen and (max-width:500px){
 .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}