Question

我正在使用移动设备，在移动设备中我需要移动菜单。为此我做了这个

<style type="text/css">
.navbar-mini-menu a {
   color: #fff !important;
   cursor: pointer;
   display: block;
   padding: 1rem 1.5rem;
   text-decoration: none;
   transition: background-color .16s ease-in;
}

.navbar-mini-menu a:hover {  background-color: #CD5C5C; }
.navbar-mini-menu {  background-color: #000;  display: none; }
.navbar-mini-menu .menu-select {  color: #fff;  padding: 0.4rem 1.5rem; }

.navbar-mini-menu .menu-select .btn-select {
    background: url("http://test.coachfxlive.com/images/mobile-icon.png") no-repeat;
    cursor: pointer;
    position: absolute;
    height: 30px;
    width: 30px;
    right: 10px;
    top: 10px;
}

.navbar-mini-menu .mini-menu-options {  display: block; }
.navbar-mini-menu .mini-menu-options li {  display: block; }
.navbar-mini-menu .mini-menu-options li .submenu {  display: none; }
.navbar-mini-menu .mini-menu-options li:focus {  outline: 0; }
.navbar-mini-menu .mini-menu-options li:focus > .submenu {
     display: block;
     -webkit-animation-name: showSubMenu;
     -webkit-animation-duration: .4s;
 }

.navbar-mini-menu .mini-menu-options li a {  display: block;  padding: 1rem 1.5rem; 
}


.header {
   background-color: #000;
   height: auto;
   left: 0;
   min-height: 43px;
   padding: 6px 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000
}

@media screen and (max-width: 768px) {
 .header {  margin: 0;  }
 .header {  display: none;  }
 .navbar-mini-menu {   display: block; }
 .navbar-mini-menu .mini-menu-options {  display: none;  }
 .topgap{   display: none; }
}
</style>

<div class="header">menu</div>
<div class="navbar-mini-menu">mobile menu</div>

因此，它应该在移动设备中显示移动菜单，但它也不会影响Chrome和移动设备。虽然同样的事情在我的另一页工作。

在http://test.coachfxlive.com/user

链接中进行实时工作

实时无效链接http://test.coachfxlive.com/shop

Answer 1

这是我的小提琴http://jsfiddle.net/3fhgfbb2/1/，我添加的是一些颜色，表明媒体查询正在运行，并将max-width:更改为500px，因此它可以更好地适应小提琴。

这是css

.header{width: 100%; height: 100px; background-color: blue; text-align: center;color: white;}
.navbar-mini-menu{
    width: 100%; 
    height: 100px; 
    background-color: red; 
    text-align: center;
    color: white;
    display: none;
}
@media screen and (max-width: 500px) {
 .header {  margin: 0;  }
 .header {  display: none;  }
 .navbar-mini-menu {   display: block; }
 .navbar-mini-menu .mini-menu-options {  display: none;  }
 .topgap{   display: none; }
}

Answer 2

问题不在于媒体查询或引导程序，因为这个元标记

<meta name="viewport" content="maximum-scale=1,user-scalable=yes,width=1024" >

我用这个替换它，它运作良好。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

媒体查询不在chrome和设备中工作但在firefox上工作

2 个答案: