0

我有这个媒体查询，里面有一些 CSS，查询在我使用过类似 CSS 的其他网站上运行良好，当我调整浏览器大小时，我得到了想要的效果。但是当我在 iPad 或 android 上看时，我看不到任何效果，如果媒体查询不存在

@media only screen and (max-width: 767px) {
.menu-button{
display: block;
height: 42px;
background-image: url(/sites/all/themes/dream/images/menu-icon.png);
background-repeat: no-repeat,repeat-x;
background-position: 98% 50%,0 0;
text-align: right;
font-weight: 700;
font-family: 'SweetSans';
text-transform: uppercase;
color: #333333;
line-height: 42px;
cursor: pointer;
padding-right: 36px;
font-size: 13px;
margin-right: 106px;
}




.menu-button {
    display: block;
    height: 34px;
    background-image: url(/sites/all/themes/dream/images/menu-icon.png);
    background-repeat: no-repeat, repeat-x;
    background-position: 98% 50%, 0 0;
    text-align: right;
    font-weight: 700;
    font-family: 'SweetSans';
    text-transform: uppercase;
    color: #333333;
    line-height: 42px;
    cursor: pointer;
    padding-right: 36px;
    font-size: 13px;
}


#main {
  width: 100%;
}

#block-menu-primary-links ul.menu li {

  float: none;
  padding: 0px 0px;
  width: 100%;
  display: none;
  float: left;

  background-color: rgb(172, 173, 184);

}

#main li {
  float: none;
  list-style-type: none;
  font-weight: 400;
}

#main li.first a {
    border-left: 0px;
}

#main li a {
    width: 100%;
}

#main li ul, #main li ul li, #main li ul li a {
    position: relative;
    float: none;
    width: 100%;
}
}
4

2 回答 2

1

您必须将veiwport标签添加到您的 HTML（在 中head）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
于 2013-01-20T02:30:12.527 回答
0

我认为问题在于您将这件作品放在顶部：

@media only screen and (max-width: 767px) {
.menu-button{
display: block;
height: 42px;
background-image: url(/sites/all/themes/dream/images/menu-icon.png);
background-repeat: no-repeat,repeat-x;
background-position: 98% 50%,0 0;
text-align: right;
font-weight: 700;
font-family: 'SweetSans';
text-transform: uppercase;
color: #333333;
line-height: 42px;
cursor: pointer;
padding-right: 36px;
font-size: 13px;
margin-right: 106px;
}

它被覆盖

.menu-button {
    display: block;
    height: 34px;
    background-image: url(/sites/all/themes/dream/images/menu-icon.png);
    background-repeat: no-repeat, repeat-x;
    background-position: 98% 50%, 0 0;
    text-align: right;
    font-weight: 700;
    font-family: 'SweetSans';
    text-transform: uppercase;
    color: #333333;
    line-height: 42px;
    cursor: pointer;
    padding-right: 36px;
    font-size: 13px;
}

尝试将媒体查询及其内容放在底部。

让我知道这是否有效。

问候

于 2013-01-20T02:36:32.617 回答