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/

媒体查询修复问题

2 个答案: