CSS响应错误答案

【问题标题】：CSS responsive errorCSS响应错误
【发布时间】：2013-10-28 19:10:38
【问题描述】：

我只是不知道背景发生了什么，在桌面上很好，但是当我尝试调整浏览器大小或在移动设备上查看时，背景不再存在。

桌面版截图。

手机版截图。

------ 风格----------

    header .menu-wrap{ background: #474749; margin-top: 20px}
    header .menu-wrap .main-menu > li{ float: right; background: #fff; border-left: 2px solid #fff; position: relative;}
    header .menu-wrap .main-menu > li:first-child{ border-right: 2px solid #fff;}
    header .menu-wrap .main-menu > li > a{ color: #fff; padding: 10px 16px; display: block; background: #474749; border-radius: 15px 0 0 0; font-size: 19px; font-family: 'Oron'}
    header .menu-wrap .main-menu > li > a:hover{ background:#fff000; color: #414042 }
    header .menu-wrap .main-menu > li:hover a{text-shadow: .0px 0px #000; }
    header .menu-wrap .main-menu > li .sub-menu{ position: absolute; background: #e6e7e8; display: none; width: auto; z-index: 9999}
    header .menu-wrap .main-menu > li .sub-menu li{ background: url(../images/bullet.png) no-repeat 130px center; padding-right: 20px; display: inline-block; float: right; width: auto; min-width: 120px;padding: 8px 18px;
-webkit-transition: all 300ms ease-out;
   -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
   -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;} 
    header .menu-wrap .main-menu > li .sub-menu li a{ display: block; margin-right: 15px}
    header .menu-wrap .main-menu > li .sub-menu li:hover{ background: url(../images/bullet.png) no-repeat 131px center #fff000; color: #414042}

--------- HTML -----------

                <div class="menu-wrap">
                    <div class="grid-container">
                        <ul class="main-menu">
                            <li><a href="#">אודות</a></li>
                            <li><a href="#">לימודים</a></li>
                            <li><a href="#">מרכז מידע והרשמה</a></li>
                            <li><a href="#">שירות לסטודנט</a>
                                <ul class="sub-menu">
                                    <li><a href="">עד 20 תווים 12 pt</a></li>
                                    <li><a href="">עד 20 תווים 12 pt</a></li>
                                </ul>
                            </li>
                            <li><a href="#">סגל</a></li>
                            <li><a href="#">כנסים ואירועים</a></li>
                            <li><a href="#">ספריה</a></li>
                            <li><a href="#">מחקר עיון והוצלא</a></li>
                            <li><a href="#">מעורבות חברתית</a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </div>

【问题讨论】：

请在您指定移动和桌面媒体查询背景属性的地方添加 css
请您提供您的html和css，否则很难帮助您。不过，我会检查你的 CSS 中的 @media 样式。
大家好，我刚刚添加了css和html代码，希望对您有帮助，谢谢
我想要的不是真正的响应式页面，我只是想让页面看起来和桌面版一样
您是在谈论整个网站的背景图片还是只是菜单链接？因为在您的示例代码中，似乎唯一的背景图像用于菜单链接

标签： html css mobile

【解决方案1】：

要将图像用作页面的背景附件，您可以这样做：

HTML 在<body> 的开头下方使用一个容器 div：

<body>
  <div class="container">
     // your html code inside the container div
  </div>
</body>

CSS 将背景附件放在容器 div 中，给 div 的宽度为 100% 而不是 px，这样它将在每个屏幕/视口中显示相同：

.container {
  width: 100%;
  background: url('http://www.amazonwalls.com/wp-content/uploads/2013/06/Big-Action-Spongebob-Squarepants-Cartoon.jpg');
}

【讨论】：

我试过了，但是当我调整浏览器大小时背景仍然消失了
那么我必须假设您的 css 文件中某处有一个媒体查询，它检测到屏幕分辨率大小，并在达到移动屏幕大小时取出背景图像。解决这个问题的唯一方法是查明媒体查询并修改/删除它。
我也试过只用彩色背景，结果是一样的，我用的是“modernizr”库，“normalize.min.css”对它有影响吗？跨度>
我怀疑它的库..检查浏览器加载的所有css文件有一个媒体查询库.....
尝试使用开发者工具：Chrome按F12（将打开开发工具），然后点击Network，将显示浏览器加载的所有文件

【解决方案2】：

尝试使用 bootstrap 主题，使用起来非常简单方便，响应式 html 的好资源之一。

http://getbootstrap.com/2.3.2/getting-started.html

【讨论】：

这里不需要添加一个全新的框架（及其相关的开销）。完全没有。