Html 如何使导航栏对移动设备（包括Codepen）作出响应？_Html_Css

Html 如何使导航栏对移动设备（包括Codepen）作出响应？

html css

Html 如何使导航栏对移动设备（包括Codepen）作出响应？,html,css,Html,Css,我目前正在使我的网页响应。我正在努力解决导航栏的问题，但我不知道从哪里开始让它更方便移动。这就是我的导航栏的外观： HTML: 以下是导航栏上的代码笔代码：这就是我希望它在手机上的样子：我从这里到哪里去创造一个类似的结果感谢所有回复。您需要使用@media query根据屏幕大小覆盖css。。。工作示例如下所示 html，正文{ 保证金：自动；填充：0px； } .集装箱{ 保证金：0自动；宽度：85%； } .clearfix{ 明确：两者皆有； } /************

我目前正在使我的网页响应。我正在努力解决导航栏的问题，但我不知道从哪里开始让它更方便移动。这就是我的导航栏的外观：

HTML:

以下是导航栏上的代码笔代码：

这就是我希望它在手机上的样子：

我从这里到哪里去创造一个类似的结果

感谢所有回复。

您需要使用@media query根据屏幕大小覆盖css。。。工作示例如下所示

html，正文{
保证金：自动；
填充：0px；
}
.集装箱{
保证金：0自动；
宽度：85%；
}
.clearfix{
明确：两者皆有；
}
/*******************************/
/*********************标题*******************/
导航{
文本对齐：居中；
宽度：100%；
背景色：白色；
边框：2件纯黑；
}
导航ul{
填充：0；
保证金：0；
}
李海军{
颜色：黑色；
显示：内联块；
字体大小：30px；
字体大小：300；
字体系列：“萨克拉门托”，草书；
垂直对齐：中间对齐；
利润率：16px 20px；
}
李阿{
文字装饰：无；
颜色：黑色；
}
.标志{
高度：100px；
}
.小屏幕{显示：无；}
@媒体屏幕和屏幕（最大宽度：768px）{
导航li{显示：块}
.小屏幕{显示：块；}
.大屏幕{显示：无；}
}

为了创建响应性强的网站，而不是从头开始，请使用可用的框架，如

Bootstrap提供了一个现成的可折叠导航栏，可以自动折叠移动屏幕上的导航栏，并根据需要显示“亨伯格图标”切换下拉菜单。官方文件可在此处找到：

您还可以在此处找到一个工作示例和有关如何实现引导导航栏的更多说明：

在代码笔中实际实现它是一项工作，但并不难。我认为自己实际实施它会对你有好处。如果在实现过程中遇到任何特殊问题，您可以随时返回堆栈溢出。所以祝你好运

以下是一些可能有用的附加链接：

<head>

  <link href="https://fonts.googleapis.com/css?family=Gilda+Display|Montez|Sacramento" rel="stylesheet">

</head>


<nav>
      <div class="navcontainer">
         <ul>
            <li class="right"><a href="productPage.php">Shop</a></li>
            <li class="right"><a href="">Login</a></li>
            <li><a href="index.php"><img class="logo" src="http://rubyfearless.com/wp-content/uploads/2012/08/style-insider-logo221.jpeg"></a></li>
            <li class="right"><a href="contact.php">Contact us</a></li>
            <li class="right"><a href="blog/cms.php">Blog</a></li>
         </ul>
      </div>
     </nav>

     <div class="clearfix"></div>

html, body {
  margin: auto;
  padding: 0px;
}

.container{
    margin: 0 auto;
    width: 85%;
}

.clearfix{
    clear:both;
}


/*******************************/

/*********************HEADER*******************/



nav {
  text-align: center;
  width: 100%;
  background-color: white;
  border:2px solid black;
}

nav ul {
  padding: 0;
  margin:0;
}

nav li {
  color: black;
  display: inline-block;
  font-size: 30px;
  font-weight: 300;
  font-family: 'Sacramento', cursive;
  vertical-align: middle;
  margin: 16px 20px;
}



li a{
    text-decoration: none;
    color: black;
}

.logo{
    height:100px;
}