Question

我有以下媒体屏幕查询在本地浏览器上作为xml工作，但它似乎不适用于blogspot：

/* for 1024px or less */
@media screen and (max-width: 1024px){
#wrapper {
width:100%;
float:none;
}

#header-wrapper {
width:100%;
}

#navigation {
width:100%;
font-size:0.7em;
}

#content-wrapper{
width:63.8%;
float:left;
}

#sidebar-wrapper{
margin-left:0.5%;
width:34%;
float:left;
}

#footer-wrapper{
width:100%;
float:left;
}
}

/* for 700px or less */
@media screen and (max-width: 700px) {
#content-wrapper {
width: auto;
float: none;
}

#sidebar-wrapper {
width: auto;
float: none;
}
}

这些工作在本地浏览器（firefox）上，但是当我在博客上实现它们时，当我尝试通过缩小浏览器来改变浏览器的宽度时，媒体查询无法工作。

我也添加了元视口代码，但仍无效。

<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>

有什么想法吗？非常感谢！

*增加：

此代码也导致视图破坏：

#navigation{
background-color: #5F5F5F;
margin-top: -25px;
}

#navigation ul{
margin-left:-40px;
}

#navigation ul li{
display:inline-block;
padding-right: 10px;
padding-top:10px;
padding-bottom:10px;
}

#navigation ul li:hover{
background-color:#000000;
}

#navigation ul li a{
text-decoration:none;
color:white;
font-family:calibri;
padding-left:10px;
}

Answer 1

点击此链接：http://www.fiveforblogger.com/2012/01/fun-with-css-media-queries-in-blogger.html

<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'/>

...

@media only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    #page-wrapper
        { width: 800px; }     
    #side-wrapper
        { position: relative; float: left; top: 0px; margin-top: 20px; width: auto; }    
    ...
    ...
    }

@media only screen and (min-width: 500px) and (max-width: 767px) {
    #page-wrapper
        { width: 640px; }     
    .menu, #logo img
        { width: 100%; }
    ...
    ...
    }

Answer 2

看起来问题是评论标记。也许博客不支持这种评论写作风格。现在问题解决了，因为我摆脱了它们！

媒体查询无法在Blogger中使用

2 个答案: