如何使导航栏对平板电脑做出响应？

Question

So, I've started work on a navbar and it's kinda my first time doing this since it's a school project. 因此，我已经开始在导航栏上工作，这是我的第一次，因为这是一个学校项目。 On PC, my navbar look pretty good, the problem is with how the navbar looks on a tablet. 在PC上，我的导航栏看上去非常不错，问题出在平板电脑上的导航栏外观如何。 Normally, this wouldn't be a problem, but my school is mostly tablet-centric, so I wanna make it iPad-friendly. 通常，这不会有问题，但是我的学校主要以平板电脑为中心，因此我想使其适合iPad。

HTML HTML

<html>
<head>

    <title>Project Layout - Original</title>

<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="homecontent.css" type="text/css" />

<style>

</style>

</head>
<body>



<header>

    <div id="container">

    <nav id="nav">

        <ul>
            <img src="finesselogotag.png" id="titleimage"> </img>
            <li><a class="active" href="placeholder.html">Home</a></li>
            <li><a class="nav" href="placeholder.html">Products</a></li>
            <li><a class="nav" href="placeholder.html">Order now</a></li>
            <li><a class="nav" href="placeholder.html">Games</a></li>
            <li><a class="nav" href="placeholder.html">About us</a></li>
            <li><a class="nav" href="placeholder.html">Presentation</a></li>
        </ul>
    </nav>

    </div>

</header>



<div>
    <p>Test text</p>
</div>


<footer>

    <p class="copyright">&copy;Copyright by DLSZ</p>
</footer>

</div>

</body>
</html>

CSS CSS

    /*to remove default margins*/

* {
margin: 0;
list-style-type: none;
background-color: #e0dbd1
}
/*to remove default margins*/

header, nav, section, article, footer {
  display: block;
}

/*Css for the whole div*/
#container {
    list-style: none;
    font-weight: bold;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    background-color: #1f242e;
    height:49.5px;
    float: left;
}

.logo {
height: 100px;
width: 200px;
float: left;
}


/*CSS for the whole div*/

/*Menu Bar*/

#nav {
float:left;
height: 50px;
text-align: center;
}

#nav ul {
float: left;
margin: 0px;
padding: 0px;
overflow: visible;
}

#nav li {
float: left;
display: block;
height: 19.5px;

}

#nav a {
float: left;
text-decoration: none;
color: #e0dbd1;
font-family: verdana;
}

#nav li a {
    float: left;
        display: block;
        padding: 15px;
        background-color: #1f242e;
        text-align: center;
        font-style: verdana;

}

#titlenav {
float: left;
background-color: #1f242e;
display: block;
font-family: SFAtarian;
padding: 15px;
font-size: 40px;
height: 19.5px;
color: #e0dbd1;
position: absolute;
top: -1.5%;
right: 0%;
}

#titleimage {
position: absolute;
top: -1.95%;
right: 0%;
float: left;
width: 150px;
height: 79.5px;
}

/*Menu Bar*/


section {
height: auto;
width: 1000px;
}

footer {
text-align:center;
height: 40px;
}

footer ul li{
    display: inline-block;
    }

footer ul li a {
    color: 000000;
}

.content {
    display: inline-block;
    padding: 2px;
    margin-left: 50px;
    margin-bottom: 15px;
    margin-top: 25px;
    border: 2px solid black;
    width: 900px;
}

.left {
    float: left;
    margin-right: 5px;
}

.right {
    float: right;
    margin-left: 5px;
}

/*FONTS*/

@font-face {
    font-family: SFAtarian;
    src: url(SFAtarian.ttf);
}
/*END OF FONT LIST*/

Here's what it looks like normally: 这是通常的样子：

And here's what it looks like on an iPad: 这是在iPad上的外观：

Like I said, I'm kind of new to this kinda thing. 就像我说的那样，我有点陌生。 Any advice on how to do this would be greatly appreciated, thanks! 任何有关如何执行此操作的建议将不胜感激，谢谢！

Answer 1

<head> 
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

use this tag in section,it will work. 在部分中使用此标签，它将起作用。 use of viewport : The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. 视口的使用：视口因设备而异，并且在手机上会比在计算机屏幕上小。

Answer 2

Try any of these.. Bootstrap navigation: https://www.w3schools.com/bootstrap/bootstrap_navbar.asp 尝试以下任何一种。.引导程序导航： https : //www.w3schools.com/bootstrap/bootstrap_navbar.asp

W3.css navigation: https://www.w3schools.com/w3css/w3css_navigation.asp W3.css导航： https ://www.w3schools.com/w3css/w3css_navigation.asp

Answer 3

Check this please, here is the responsive view for your code

https://codepen.io/atulraj89/pen/QJVPJv

Answer 4

 $('.hamberger').click(function() { $('.hamberger-nav-bar').toggleClass('active-left'); });

  /*to remove default margins*/ * { margin: 0; list-style-type: none; } /*to remove default margins*/ header, nav, section, article, footer { display: block; } /*Css for the whole div*/ #container { list-style: none; font-weight: bold; margin-bottom: 10px; width: 100%; text-align: center; background-color: #1f242e; height:49.5px; float: left; } .logo { height: 100px; width: 200px; float: left; } /*CSS for the whole div*/ /*Menu Bar*/ #nav { position: relative; float:left; height: 50px; text-align: center; margin-top: 50px; } #nav ul { float: left; margin: 0px; padding: 0px; overflow: visible; } #nav li { float: left; display: block; height: 19.5px; } #nav a { float: left; text-decoration: none; color: #e0dbd1; font-family: verdana; } #nav li a { float: left; display: block; padding: 15px; background-color: #1f242e; text-align: center; font-style: verdana; } #titlenav { float: left; background-color: #1f242e; display: block; font-family: SFAtarian; padding: 15px; font-size: 40px; height: 19.5px; color: #e0dbd1; position: absolute; top: -1.5%; right: 0%; } #titleimage { position: absolute; top: -1.95%; right: 0; float: left; width: 150px; height: 79.5px; } /*Menu Bar*/ section { height: auto; width: 1000px; } footer { text-align:center; height: 40px; } footer ul li{ display: inline-block; } footer ul li a { color: 000000; } .content { display: inline-block; padding: 2px; margin-left: 50px; margin-bottom: 15px; margin-top: 25px; border: 2px solid black; width: 900px; } .left { float: left; margin-right: 5px; } .right { float: right; margin-left: 5px; } .hamberger { display: none; } /*FONTS*/ @font-face { font-family: SFAtarian; src: url(SFAtarian.ttf); } /*END OF FONT LIST*/ /* HAMBERGER CSS */ .hamberger { position: absolute; top: 30px; right: 15px; z-index: 999999; padding: 10px 35px 16px 0; cursor: pointer } .hamberger span, .hamberger span:before, .hamberger span:after { content: ""; position: absolute; display: block; width: 35px; height: 3px; border-radius: 1px; border-color:#ffffff; background: #ffffff; cursor: pointer; } .hamberger span:before { top: -10px; } .hamberger span:after { bottom: -10px; } .hamberger span, .hamberger span:before, .hamberger span:after { transition: all 300ms ease-in-out; } .hamberger.active span { background-color: transparent } .hamberger.active span:before, .hamberger.active span:after { top: 0; } .hamberger.active span:before { transform: rotate(45deg); } .hamberger.active span:after { top: 10px; transform: translatey(-10px) rotate(-45deg); } /* MEDIA QUERY */ @media (max-width: 991px){ .hamberger-nav-bar { position: fixed; left: -300px; width: 300px; transition: all 0.5s; } .hamberger-nav-bar.active-left { left: 0; position: relative; } .hamberger-nav-bar.active-left:after { position: fixed; content: ""; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: -1; } #nav { float: none; height: auto; position: relative; z-index: 99; } #nav ul { width: 100%; float: none; } #nav li { float: none; height: auto; width: 100%; } #nav li a { float: none; } #titleimage { top: 0; } .hamberger { float: left; margin: 17px 0 0 10px; position: fixed; top: 0; left: 20px; display: block; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <title>Project Layout - Original</title> <link rel="stylesheet" href="main.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="homecontent.css" type="text/css" /> </head> <body> <header> <div id="container"> <div class="hamberger"> <span></span> </div> <nav id="nav" class="hamberger-nav-bar"> <ul> <li><a class="active" href="placeholder.html">Home</a></li> <li><a class="nav" href="placeholder.html">Products</a></li> <li><a class="nav" href="placeholder.html">Order now</a></li> <li><a class="nav" href="placeholder.html">Games</a></li> <li><a class="nav" href="placeholder.html">About us</a></li> <li><a class="nav" href="placeholder.html">Presentation</a></li> </ul> </nav> <img src="finesselogotag.png" id="titleimage"> </div> </header> <div> <p>Test text</p> </div> <footer> <p class="copyright">&copy;Copyright by DLSZ</p> </footer> </div> </body> </html>

Sea the above code. 海上面的代码。

如何使导航栏对平板电脑做出响应？

问题描述

4 个解决方案

解决方案1
0 2018-11-28 04:59:15

解决方案2
0 2018-11-28 05:11:15

解决方案3
0 2018-11-28 05:47:24

解决方案4
0 2018-11-28 08:34:06

如何使导航栏对平板电脑做出响应？

问题描述

4 个解决方案

解决方案1 0 2018-11-28 04:59:15

解决方案2 0 2018-11-28 05:11:15

解决方案3 0 2018-11-28 05:47:24

解决方案4 0 2018-11-28 08:34:06

解决方案1
0 2018-11-28 04:59:15

解决方案2
0 2018-11-28 05:11:15

解决方案3
0 2018-11-28 05:47:24

解决方案4
0 2018-11-28 08:34:06