Question

您好我是CSS的新手

我想我已经打破了我页面上的CSS

徽标在移动设备的页面上运行

如果有人能指出为什么这不响应？

感谢

保

---------------------------css below ------------------

.logo-wrap {
    background:url(images/bg-header.png) repeat-x;
    min-height:89px;
    position:relative;
    }
.logo-wrap:before {
    content:"";
    display:block;
    height:100%;
    left:-100%;
    position:absolute;
    top:0;
    width:100%;
}
.logo-wrap:after {
    content:"";
    display:block;
    height:100%;
    right:-100%;
    position:absolute;
    top:0;
    width:100%;
}
.logo-wrap:before { background:url(images/bg-header.png) repeat-x; }
.logo-wrap:after { background:url(images/bg-header.png) repeat-x; }
.logo {
    position:absolute;
    top:15px;
    left:25px;
    text-align:center;
}
@media (min-width: 768px) and (max-width: 979px) {
    .logo { width:100%; }
}
@media (max-width: 767px) {
    .logo {
        position:relative;
        top:0;
        margin:20px 0;
    }
    .logo.pull-left { float:none;
     }
}
.logo a {
    filter:none !important;
    background-color:#393939;
    background-image:-moz-linear-gradient(top,#434343,#292929);
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#434343),to(#292929));
    background-image:-webkit-linear-gradient(top,#434343,#292929);
    background-image:-o-linear-gradient(top,#434343,#292929);
    background-image:linear-gradient(to bottom,#434343,#292929);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff434343', endColorstr='#ff292929', GradientType=0);
    display:block;
    padding:14px 11px 12px 11px;
    border-radius:6px 6px 0 0;
}
@media (max-width: 767px) {
    .logo a { text-align:center; }
}
.logo p {
    background:#8ec63f;
    border-top:1px solid #fbde02;
    font:italic 34px/1.1em 'Orbitron', sans-serif;
    font-weight:900;
    text-align:center;
    padding:0 5px 5px 0;
    color:#2c2c2c;
    margin:0;
    border-radius:0 0 6px 6px;
}
@media (min-width: 768px) and (max-width: 979px) {
    .logo p { font-size:16px; }
}
.logo .logo_h__txt { text-align:center; }
.logo .logo_h__txt a { padding:5px 15px 5px 5px; }
.logo .logo_h__txt a:hover, .logo .logo_h__txt a:active {
    color:#fff;
    text-decoration:none;
}

Answer 1

您的图片响应迅速！您的代码的其他部分正在影响徽标。

不幸的是，我会补充一点，你应该提高我们的响应式设计技能，即使我给你这些修改来修复你的徽标，你的网站只是在某些尺寸上工作，你的网站几乎每个手机都需要一些认真的工作景观模式。不仅存在重复的媒体查询，您的代码中还存在760px的媒体查询（以及示例中显示的767px），如果重新调整窗口大小并且通常不是很好的做法，那么这看起来不太好。

要解决徽标问题，...

在.logo-wrap。
您需要完全删除.logo以及左上角和左上角的绝对位置。
您还需要从媒体查询“max-width：767px”中的.logo类中删除边距。
要替换此间距，我会添加填充：10px;到您网页上的.span4类（未在上面的代码中列出）
我认为你不需要＆lt; div class =“spacer”＆gt;无论是！（也不在上面的代码中）

祝你的网站建设好运。

Answer 2

只需添加img-responsive对您的徽标图片类

<img src="logo.png" class="img-responsive">

但使用bootstrap

将页眉上的链接和页脚上的脚本源

放在上面

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

参见参考资料

http://getbootstrap.com/css/#images

CSS徽标在移动设备上无响应

2 个答案: