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://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 
    }

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
}

来源：A beautiful mind 然后，您可以在以下代码

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

    if(isMobile.any()){

}

它会像img.class或class.img {height：30％; width：30％

在移动视图中仅缩放一个图像

2 个答案: