我正在设计一个网站的样式,并有一些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中从小做起。这意味着首先指定全局样式(不会改变的样式),然后逐步处理大视口。
您可能会覆盖一些您想要保留的样式。