媒体查询修复问题

Question

我做了一些简单的媒体查询并加载到网站中，但是当我刷新页面时，由于媒体查询 css 网站 orignal css 也令人不安，请建议我如何根据移动宽度修复媒体查询的准确和适当的解决方案以及包括网站中这些查询的方式，以便我可以制作一个适当的响应式网站。

更多建议我分享css代码

/* 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;

}

Answer 1

您缺少括号：{}

@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;  
    }
}

一些测试您的设计响应能力的参考：http://creatiface.com/tools/responsive-design-test

Answer 2

在您的媒体查询中添加{}：

@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;

}
}

更多详情请看此链接：http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/