html - 媒体查询在 Blogger 中不起作用

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) 上工作，但是当我在 blogger 上实现它们时，当我试图通过缩小来更改浏览器的宽度时，媒体查询将不起作用。

我也添加了元视口(viewport)代码，但仍然不起作用。

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

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

*添加:

此代码还导致 View 损坏:

#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%; }
    ...
    ...
    }