Question

我有一些内部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%;
}
}

Answer 1

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

我认为问题在于你将这件作品放在最上面：

@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;
}

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

如果有效，请告诉我。

问候

媒体查询在浏览器中响应但不是移动

2 个答案: