我在响应式菜单中遇到问题

debugcn 发表于 Dev

马修·约翰

我在响应式菜单中遇到问题。如果您收缩浏览器并单击菜单图像。它没有井然有序。请选中此检查链接。http://vkacademy.in/res/我需要使用什么属性。在mobile.css文件中，我使用了common类。我想知道什么是属性，我需要在common类中使用其他属性来正确显示菜单。我知道仅使用pixel。请以像素为单位给我答案。

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

Shreyo gi

如@ jorge9200所述，您首先需要了解媒体查询。这是一个易于理解的链接。

基本/更快，例如：

/* 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）来加快开发速度。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。