Javascript 响应标头映像（引导3/4）

在发布之前，我在标题响应方面遇到了更多问题。我想使用浏览器使标题图像（徽标）的大小正确缩小，并在移动设备上看起来正确

与此网页一样，当重新调整大小时：

这里是fiddle链接：www.jsfiddle.net/0m4z6u25/

任何关于如何让导航栏与上面链接的网站做同样的事情的提示都将是一个巨大的帮助

---

感谢使用媒体查询，您需要根据屏幕宽度调整标题图像的大小。然后你可以控制大小，保持比例，然后你可以在手机上显示一个不同的布局标志-例如把“学生会”放在圆圈下面。这不会使它太小，在手机上看起来也不错

媒体查询的一个示例：

@media (min-width: 900px) {}

---

Bootstrap还有一些响应类，如

可见xs

隐藏xs

，在这里可能会有所帮助。

首先更新Bootstrap.css的版本，使用最新的稳定版本（v3.3.6）

CDN链路

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css

接下来，您需要对导航条形码进行大量更改。我已经做了修改，以符合您的要求。这里

<!--HEADER-->                      
<div class="header">
  <div id="header-container" class="container">
    <div class="headerdiv">
      <a href="" class="headerleft">
        <img src="http://i.imgur.com/DotvQDw.jpg" class="img-fluid" alt="header SU">
      </a>
    </div>     
  </div>
</div> 

  <nav class="navbar navbar-default" id="nav-main">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img alt="Brand" width="20" height="20" src="img/nav_logo.jpg">
          </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Help</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Forums</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Search</button>
            </form>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

---

当屏幕尺寸较小时，您可以使用

隐藏/显示某些元素谢谢您的帮助，但我的徽标仍然没有响应，而且其大小调整得太小。我需要它做的是在缩小尺寸和在移动设备上查看时保持大小和位置。您的图像在小屏幕上变小，因为您在样式中添加了

max width:100%

。如果你不希望它改变大小，那么你可以有固定的宽度和高度。我认为你应该编辑你的问题，以更详细地描述你想要实现的行为。您提供的链接可能会在一段时间后变得不可用，从而使您的问题变得不清楚。@RainMan此操作非常有效…看起来正是我希望它在移动设备上的表现！谢谢，你能写出任何CSS吗？或者稍微调整一下我的CSS？实际上，我开始一次编写两周的代码，但我尝试的不是CSS。这将是一个巨大的帮助。我可以把我的头撞在墙上，以我的生命来说，我不能让CSS来设计它。即使复制和粘贴你的代码也会破坏我的本地浏览器。HTML也会更新。我在这里添加了

id

属性<代码>。也许这就是为什么你的风格没有得到应用。

/* Stylesheet */

html, 
body {

height:100%;    
}

img {
    max-width: 100%;
}


/* Salford SU Header */

.headerbox {
    height: 200px;
    width: 100%;
    background-color:white;
}


#header-container{
    padding-left: 140px;
    padding-right: 140px;
}



.headerdiv {
    height: 200px;
    width:100%;
    padding-top: 0px;
    padding-bottom: 17px;
    padding-left: 65px;
    padding-right: 65px;
}

.headerleft {
    height: 146px;
    min-width:400px;
    width: 50%;
    float: left;
    padding-right: 15px;
    background-position: center left;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
}

.header-right {
    width: 40%;
    height: 146px;
    float: right;
    border-left: 2px solid #c5c6c8;
    padding-left: 15px;
}

.headerright1 
{
    height: 40px;
    width: 100%;
    text-align: justify;
    vertical-align: bottom;
    padding-top: 7px;
}

.headerright1 > a {
    width: 34px;
    display: inline-block;
    vertical-align: bottom;
    zoom: 1;
}


/*
#cover {
    background:#222 url('img/header.jpg') center center no-repeat;
    background-size:cover;
    color:white;
    height: 24.5%;
    text-align:center;
    display:flex;
    align-items:bottom;
}
*/


 /*NAVIGATION CSS*/
#nav-main {
    background: #ed1e24;
}

#nav-main li {
    font-family: 'Work Sans', sans-serif;
    font-size: 18px;
    color:white;
}

.section-content {
    padding: 5rem 0;
}

#about {
    background: url('img/working.jpg') center center no-repeat;
}

.about-text{
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 1.875rem;
}

#footer-main {
    background: #f1163e;
    color:white;
    font-size: 0.8rem;
    padding: 2.5rem 0;
}



@media (min-width: 158px) and (max-width: 600px) {
#header-container {
    padding-left: 0%;
    padding-right: 0%;
}

    .headerleft {
        background-position: center left;
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        min-width: 100%;
        min-height: 100%;
    }

    .headerleft > a {
        max-width: 100%;
        max-height: 100%;
        background-position: center left;
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        min-width: 100%;
        min-height: 100%;
    }
}