css - 在移动 View 中仅缩小一张图像

Question

我没有太多的 html/css 知识。我有整个网站黄金移动/平板电脑 View 。我遇到了导航栏的问题。当屏幕缩小时，logo 占据了整个导航栏，你看不到链接。所有其他图像都完美缩小。我无法在代码中找到更改它的位置，因此链接要么显示在它的下方，要么显示在它的旁边——真的不在乎。我只是想让它显示出来。

<div id="wrapper">
<div id="header-wrapper" class="container">
    <div id="header" class="container">
        <div id="logo">
        <a href="/index.html"><img src="images/logo.png" /></a></div>
        <div id="menu">
            <ul>
                <li><a href="/index.html" accesskey="1" `title="">Home</a>`</li>
                <li><a href="/ourteam.html" accesskey="2" title="">Our `Team</a></li>`
                <li><a href="/services.html" accesskey="4" `title="">Services</a></li>`
                <li><a href="/contact.html" accesskey="3" `title="">Contact</a></li>`
            </ul>
        </div>
    </div>
    <div id="banner" class="container"><img src="images/img03.jpg" alt="" /></div>
</div>

我应该在响应式 css 文件中添加什么才能使该死的 Logo 不会接管世界？

CSS:

#wrapper
{
overflow: hidden;
padding-top: 100px;
}

.container
{
width: 1200px;
margin: 0px auto;
}

.clearfix
{
clear: both;
}

/** HEADER */

#header-wrapper
{
overflow: hidden;
height: 650px;
margin: 0px auto;
box-shadow: 0px 0px 10px 5px rgba(0,0,0,.05);
}

#header
{
overflow: hidden;
height: 75px;
background: url(images/img02.jpg) repeat-x left top;
}

/* Logo */

#logo

{
float: left;
width: 370px;
padding: 0px 0px 0px 30px;
text-shadow: 1px 1px 0px #814059;
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
}

#logo h1
{
float: left;
padding: 5px 10px 0px 0px;
}

#logo h1 a
{
text-decoration: none;
font-size: 1.5em;
font-weight: 300;
color: #FFFFFF;
}

#logo p

{
display: block;
padding: 25px 0px 0px 40px;
letter-spacing: 1px;
font-size: 1.2em;
color: #E5C5C9;
}

#logo p a
{
color: #E5C5C9;
}

/* Menu */

#menu
{
float: right;
width: 750px;
padding: 20px 30px 0px 0px;
}

#menu ul
{
float: right;
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu li
{
float: left;
}

#menu a
{
display: block;
margin-left: 1px;
padding: 7px 0px 7px 30px;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #814059;
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 16px;
font-weight: 300;
color: #FFFFFF;
}

#menu a:hover, #menu .current_page_item a
{
text-decoration: none;
border-radius: 5px;
color: #FFFFFF;
}

桌面与移动设备的图像 https://imgur.com/a/UI2bV

Answer 1

@media 查询怎么样？

HTML:

    <div id="wrapper">
      <div id="header-wrapper" class="container">
        <div id="header" class="container">
          <div id="logo">
            <a href="/index.html"><img id="mobilelogo" src="images/logo.png" /></a></div>
            <div id="menu">
            <ul>
              <li><a href="/index.html" accesskey="1" title="">Home</a></li>
              <li><a href="/ourteam.html" accesskey="2" title="">Our Team</a></li>
              <li><a href="/services.html" accesskey="4" title="">Services</a></li>
              <li><a href="/contact.html" accesskey="3" title="">Contact</a></li>
            </ul>
          </div>
        </div>
        <div id="banner" class="container"><img src="images/img03.jpg" alt="" /></div>
      </div>

CSS:

    @media (max-width:600px) {   // Or whatever screen width you want your breakpoint at
      #mobilelogo { height:60px; }    // Or whatever height is appropriate 
    }