Question

正在发生的事情只是文本被更改，没有别的。当屏幕尺寸发生变化时，我似乎无法操纵div。我已经设置了相关的元标记。我的桌面上的实际文件的语法是正确的（例如，网页上有＆lt; style＆gt;＆lt; / style＆gt;标签（我在一个页面上做所有事情，所以我可以更容易地参考事情。我'我会把它们移到.css文件中。）我只是想在你潜入我的代码之前展示我所拥有的东西。而且，它不是全部，只是相关的东西。如果需要更多，请让我知道，但有一件事不起作用（这应该告诉你我搞砸了）是在重新调整页面大小时没有添加背景图像。

<meta name="viewport" content="width=device-width, initial-scale=1">
@media screen and (max-width: 35em)  {
            body {
                font-size:10px;
                background-image: url("http://hdwallpapersx.com/wp-content/uploads/2013/09/Awesome-Background-Hd-Wallpaper.jpg?c09534");
                background-color: #000;
                color: #F0F;
            }
            .logo {
                position:absolute;
                top:0px;
                left:0px;
                width:100%;
                height:50px;
                background-color: rgba(0,0,0,.7);
                border:none;
                border-radius:0px;
                padding-top: 15px;
                font-size:15pt;
            }
            .bt {
                font-family: Tahoma;
                font-size:15pt;
            }
            nav {
                position:absolute;
                top: 51px;
                width: 100px;
                height: 30px;
            }
            nav ul li {
                padding-left: 10px;
                float: left;
            }
        }
        html {
            width: 100%;
        }
        body {
            width: 99%;
            background-color: #000;
            background-image: url("");
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
            color: #CCC;
        }

Answer 1

CSS从上到下解释。你在同一个媒体声明中的css上有2个正文规则，所以最后一个规则将覆盖先前在第一个声明中声明的属性。这就是你没有看到背景图片的原因。

我建议你按层次顺序声明你的规则，以避免这种麻烦。

弄乱响应式网页设计，似乎无法使其发挥作用

1 个答案: