Question

我的网站上有一个垂直菜单，我的目的是将其转换为响应，就像其他模板一样，但我不能。

这是css代码：

    ul.form {
    position:relative;
    background:#fff;
    padding:0;
    max-width:250px;
    max height:300px;
    height:100%;
    width:100%;     
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 

    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    box-shadow:  1px 1px 10px rgba(0, 0, 0, 0.1);   
}

.form li a {
    width:250x;
    padding-left:20px;
    height:56px;
    line-height:50px;
    display:block;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    text-transform:uppercase;
    font-size:14px;
    color:#686868;

    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;         
}

.form li a:hover {
    background:#efefef;
}

.form li a.lista {
    border-left:5px solid #b3cfd0;
}

.form li a.lista2 {
    border-left:5px solid #195d5c;
}

.form li:first-child a:hover, .form li:first-child a {
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.form li:last-child a:hover, .form li:last-child a {
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

.form li a:hover i {
    color:#b3cfd0;
}

.form i {
    margin-right:15px;

    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear; 
}

.form em {
    font-size: 10px;
    background: #ea4f35;
    padding: 3px 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;        
    font-style: normal;
    color: #fff;
    margin-top: 17px;
    margin-right: 15px;
    line-height: 10px;
    height: 10px;       
    float:right;
}

.form li.selected a {
    background:#efefef;
}

HTML：

<ul class="form">
    <li><a class="lista2" href="#"><i class="icon-home"></i>Portada</a></li>
    <li class="lista"><a class="lista" href="#"><i class="icon-info"></i>Servicios</a></li>
        <li><a class="lista2" href="#"><i class="icon-newspaper-o"></i>Noticias</a></li>
    <li><a class="lista" href="#"><i class="icon-cog"></i>Quienes somos</a></li>
    <li><a class="lista2" href="#"><i class="icon-signout"></i>Contacto</a></li>
</ul>

这是JSfiddle： http://jsfiddle.net/tv06s6wa/

问题定义：

如何将现有菜单转换为移动网站的响应式菜单，将其所有样式保持原样？

感谢您的一切。

Answer 1

正如有人提到的，@ media就是你想要的。类似的东西：

@media screen and (max-width: 480px) {
  .form {
    /*Place your mobile styles here*/
  }
}

Answer 2

-ms-animation-name

或。在所有移动设备上显示完整的菜单@media (max-width:480px) and (min-width:100px) { .form { /*shrink text size, containers, and everything else as desired*/ } }，并仅针对您的移动设备菜单触发display:none;！

在任何一种情况下，@ media都依赖于display:block;，如下所示;或宽度设备宽度等，有几个选项。

<meta viewport

如何将此菜单转换为响应？

2 个答案: