У меня есть следующие запросы экрана мультимедиа, которые работают в локальном браузере как 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, медиа-запросы не работали, когда я пытался изменить ширину браузера, уменьшив его масштаб.

Я также добавил мета-код области просмотра, но все еще не работает.

<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;
}
0
Alvian Casablanca 22 Фев 2015 в 14:53

2 ответа

Лучший ответ

Похоже, проблема в теге комментария. Возможно, блоггер не поддерживает такой стиль написания комментариев. Теперь проблема решена, так как я избавился от них!

0
Alvian Casablanca 22 Фев 2015 в 13:32

Проверьте эту ссылку: http: // www .fiveforblogger.com / 2012/01 / fun-with-css-media-query-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%; }
    ...
    ...
    }
1
Abdooapps 22 Фев 2015 в 12:09