Question

我在响应式菜单中遇到问题。如果缩小浏览器并单击菜单图像。它不是有序的。检查此项检查链接。 http://vkacademy.in/res/我需要使用的属性是什么。在mobile.css文件中，我使用了class common。我想知道什么是属性，我需要在普通类中使用额外的菜单才能正确使用菜单。我知道只使用像素。请以像素为单位给我答案。 / p>

<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(e) {
    $('#mob_btn').click(function(e) {
        $('.common').slideToggle(1000);
    });
});
</script>

<body>
<div id="wrapper">
<div id="logo"><img src="image/logo.png"  border="0" width="357" height="107"/></div><!--endoflogo-->
<div id="logo1"><a href="#">join as tutor or Institutue</a></div><!--endoflogo1-->
<div class="menu_btn"><img id="mob_btn" src="image/menu.png"/></div>
<div id="menu">
<div class="common"><a href="#">About us</a></div>
<div class="common"><a href="#">Department</a></div>
<div class="common"><a href="#">Facilities</a></div>
<div class="common"><a href="#">library</a></div>
<div class="common"><a href="#">Event</a></div>
</div><!--endofmenu-->
</div><!--endofwrapper-->
    my default.css
    body
    {
    margin:auto;
    background-color:#CCCCCC;
    background-repeat:repeat;
    }
    #wrapper
    {
    width:1000px;
    height:auto;
    margin:auto;
    }

    #logo
    {
    width:500px;
    height:100px;
    float:left;
    }
    #logo1
    {
    width:400px;
    height:80px;
    float:left;
    padding-left:50px;
    padding-right:50px;
    background-color:#FF00FF;
    }

    #menu
    {
    width:1000px;
    height:45px;
    float:left;
    }

    .common
    {
    width:200px;
    height:42px;
    padding-top:8px;
    float:left;
    background-color:#FFFFFF;
    background-repeat:no-repeat;
    text-align:center;
    }

    #content
    {
    width:1000px;
    height:auto;
    float:left;
    }
    .menu_btn 
    {
        display: none;
    }

   **In mobile.css**
    @media only screen and (max-width:530px)
    {
    #wrapper
    {
    width:260px;
    background-repeat:repeat;

    }

    #logo
    {
    width:260px;
    text-align:center;
    background-color:#FFFF00;
    }

    #logo img
    {
    width:260px;
    text-align:center;
    }

    #logo1
    {
    width:160px;
    padding-left:50px;
    padding-right:50px;
    height:auto;    
    }

    .menu_btn
    {
    width:260px;
    height:48px;
    display:block;
    text-align:right;
    border-bottom:1px solid #CCCCCC;
    }

    .common
    {
    width:260px;
    display:none;

    }

    .common
    {
    width:260px;
    border-bottom:1px solid #CCCCCC;
    }
    }

Answer 1

如果您想要响应式设计，则需要使用以下方法自行完成：

html文件：

<div id="menu">
<div class="common"><a href="#">About us</a></div>
<div class="common"><a href="#">Department</a></div>
<div class="common"><a href="#">Facilities</a></div>
<div class="common"><a href="#">library</a></div>
<div class="common"><a href="#">Event</a></div>
</div><!--endofmenu-->

CSS文件：

/* There are 5 buttons on the menu so: */
.common{width:20%}

/* Then I make the responsive*/
@media (min-width: 600px, max-width: 768px){
#menu{width:600px;}
}
@media (min-width: 768px, max-width: 900px){
#menu{width:768px;}
}

（...）

例如，在css文件上。

Answer 2

正如@ jorge9200所提到的，您首先需要了解媒体查询。 Here is a link for easier understanding

基本/更快，例如：

/* Mobile first queries */

/* Larger than mobile */
@media (min-width: 400px) { your own CSS for this particular screen size }

/* Larger than phablet */
@media (min-width: 550px) {your own CSS for this particular screen size}

/* Larger than tablet */
@media (min-width: 750px) {your own CSS for this particular screen size}

/* Larger than desktop */
@media (min-width: 1000px) {your own CSS for this particular screen size}

/* Larger than Desktop HD */
@media (min-width: 1200px) {your own CSS for this particular screen size}

以上媒体查询是针对主要屏幕尺寸预定义的。您可以使用它们并为每个类和ID编写CSS 要么您可以使用响应式CSS框架（如Twitter Bootstrap）来加快开发速度。

我在响应式菜单中有问题

2 个答案: