我正在设计一个网站的样式,并有一些h3标题和段落包装在名为“ featured-info”的div类中。
我也有一个页脚元素在身体的主要包装。
这些段落以斜体显示:

.featured-info p {
    font-style: italic;
}


页脚有边框:

footer {
    border-top: 1px solid rgb(128, 128, 128);
}


同样,页脚文本为h4大写:

footer h4 {
    text-transform: uppercase;
}


主要问题是我有一个设置:
@media屏幕和(最小宽度:750像素)使一些导航按钮内联并调整一些文本的大小,但是...
当页面尺寸小于750px时,页脚样式和斜体字体消失了……我不明白为什么。如果需要,我将提供更多信息。谢谢!

LE:找到了。该死的分号。谢谢你们!没想到在这么短的时间内会收到如此多的回复。

现在我有另一个问题

在分辨率最低为750px时更改的菜单下,我有一个h1标头,通常位于中间

h1 {
    font-size: 2.4213em; /*3.3684em*/
    line-height: 1.2656em;
    margin-top: 0.4219em;
    margin-bottom: 0;
    color:  rgb(172, 140, 71);
    text-align: center;

}


问题是,当窗口从750px到950px时,它会移到右侧。我有以下设置:

@media screen and (min-width: 750px){

    .main-navigation {
        min-height: 90px;
        border-bottom: 1px solid rgb(36,36,36);
        border-top: 1px solid rgb(36,36,36);
        /*overflow: hidden;  dubiosssss */
    }

    .main-navigation ul {
        max-width: 950px;
        margin: 0 auto;

    }

    .main-navigation li {
        float:left;
        margin-left: 20px;
        width: 20%;

    }

    .main-navigation a {
        background: none;
    }
}
 /* media query for 750*/
}
@media screen and (min-width: 950px){

    .main-navigation ul {
        position: relative;
        right: -15px;
    }

}


任何建议都很好,再次感谢!

最佳答案

@media参数中的min-width表示您指定的尺寸和更大的任何尺寸都将获得您设置的样式。

听起来您的某些样式放置在错误的位置。通常最好在CSS中从小做起。这意味着首先指定全局样式(不会改变的样式),然后逐步处理大视口。

您可能会覆盖一些您想要保留的样式。

09-12 13:49