在移动视图中只缩小一个图像

Question

我没有太多的html/css知识。我有整个网站的黄金移动/平板电脑视图。我遇到了导航栏的问题。当屏幕缩小时，徽标占据了整个导航栏，你看不到链接。所有其他图像都完美地缩小了。我在代码中找不到改变这一点的地方，所以链接要么显示在它下面，要么显示在它旁边-真的不在乎。我只是想把它展示出来。

<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文件，使它使dang标志不接管世界?

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://i.stack.imgur.com/qcjNf.jpg

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 
    }

Answer 2

也许你想要一个移动检测代码，如果你目前没有使用:

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};
if(isMobile.any()){
    // Mobile!
} else {
    // Not mobile
}

来源:一个美丽的心灵然后，您可以在以下代码

之后使用css类指定图像大小

    if(isMobile.any()){
}

应该是像image。class或class这样的。Img {height:30%;width:30%