Media Queries fix issue

问题:

I made some simple media queries and load in website but when I refresh the page so because of media queries css website orignal css also disturbing, please suggest the exact and proper solution how I fix the media queries as per mobile widths and also including way of these queries in website so I can make a proper responsive website.

For more suggestion I share css code

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 480px)
body {
    background-color:white;
}

#columnout {
    background:none;
    background-color:#0090d7;
    width: 300px;
    height: 200px;
    margin-top: 210px;
    position:absolute;
    z-index:100;
}

#column{

    width: auto;
    height: auto;
    text-align: right;
    margin-left: 47px;
    z-index: 1; 
    margin-top: -29px;

}

回答1:

Add {} in your media query:

@media only screen and (max-width : 480px){
body {
  background-color:white;
}

#columnout {
  background:none;
  background-color:#0090d7;
  width: 300px;
  height: 200px;
  margin-top: 210px;
  position:absolute;
  z-index:100;
}

#column{

  width: auto;
  height: auto;
  text-align: right;
  margin-left: 47px;
  z-index: 1; 
  margin-top: -29px;

}
}

For more details please see this link: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

回答2:

You are missing the brackets: {}

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

    body {
        background-color:white;
    }

    #columnout {
        background:none;
        background-color:#0090d7;
        width: 300px;
        height: 200px;
        margin-top: 210px;
        position:absolute;
        z-index:100;
    }

    #column{
        width: auto;
        height: auto;
        text-align: right;
        margin-left: 47px;
        z-index: 1; 
        margin-top: -29px;  
    }
}

Some reference for testing how responsive your design is: http://creatiface.com/tools/responsive-design-test