Question

这是小型设备的标题：

enter image description here

这是CSS：

body{
    margin: 0; 
    padding: 0;
    background-color: #EEEEEE;
    color: #393939;
    font-family: 'Molengo','Verdana','Georgia','Times New Roman',serif;

}

a, a:visited {
    color: #F03366;
    text-decoration: none;
}
#div-header{
    height: 3.1em;
    background-color: #393939;
    box-shadow: 0 4px 4px #CCCCCC;
    padding: 10px ;
}

#div-header h1 {
    display: inline-block;
    float: left;
    font-size: 1.4em;
}

#div-header h1 a, #div-header h1 a:visited {
    color: #DDDDDD;
    font-weight: bold;
    text-decoration: none;
}

#div-header .links{
    text-align: right;
    margin-top: 4.5em;
}

#div-header .links li {
    display: inline-block;
}

#div-header .links li a {
    font-size: 1.3em;
}

http://jsfiddle.net/xnh2E/

这是大屏幕的标题：

enter image description here

这是代码：

@media (min-width: 1200px) { 
    #div-header{
        height: 3.1em;
        background-color: #393939;
        box-shadow: 0 4px 4px #CCCCCC;
        padding: 10px 30px;
    }

    #div-header h1 {
        display: inline-block;
        float: left;
        font-size: 2em;
    }

    #div-header h1 a, #div-header h1 a:visited {
        color: #DDDDDD;
        font-weight: bold;
        text-decoration: none;
    }

    #div-header .links {
        display: inline-block;
        float: right;
        /*padding-top: 1em; */
        position: relative;
        margin: 0;
        text-align: left;
    }

    #div-header .links li {
        display: inline;
        padding: 0 7px;
    }

    #div-header .links li a {
        font-size: 1.3em;
    }
}

http://jsfiddle.net/f8pzX/

两者之间不同的代码中最重要的部分页面，是 .links 类的页面。

base css

#div-header .links{
    text-align: right;
    margin-top: 4.5em;
}

大屏幕css

#div-header .links {
    display: inline-block;
    float: right;
    position: relative;
}

现在，我使用媒体查询来制作响应式设计。

您可以在这里找到代码：

http://jsfiddle.net/5v8YE/

第一个问题是大屏幕的css继承了基本css的一些属性，比如text-align和margin top。

所以我用这种方式重写了这个风格：

#div-header .links {
    display: inline-block;
    float: right;
    position: relative;
    margin: 0;
    text-align: left;
}

但现在标题看起来像这样：

enter image description here

如果我添加这一行：

padding-top: 1em;

标题再次看起来很好，但是你知道为什么重新编写代码即使我将其恢复为大的默认值，它也无法正常工作屏幕？

此外，有没有办法告诉媒体查询完成覆盖样式在当前媒体查询之前定义的媒体查询？

我希望我能清楚地解释自己。我感谢任何帮助。

提前致谢。

Answer 1

您正在为大屏幕重置CSS内的边距。把这条线拿出去，剩下的就行了。

#div-header .links {
    display: inline-block;
    float: right;
    position: relative;
    text-align: left;
}

CSS的级联性质意味着您不能只清除现有的一组样式，它们需要被覆盖。因此，您需要维护所需的样式并覆盖这些样式以使页面响应。

Answer 2

我对你的代码进行了一些编辑，并对无用的定义做了一些清理。

我使用显示表和表格单元来对齐li和h1。

#div-header{
    display: table;
    width: 100%;
}
#div-header .links {
    display: table-cell;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

您可以在此处查看新代码： http://jsfiddle.net/5v8YE/4/

如何在当前查询之前正确覆盖为媒体查询定义的样式？

2 个答案: