无法弄清楚我所有其他移动设备媒体查询的错误是什么,只是我的最后一个验证,我似乎无法在任何地方找到答案。我已经坚持了一段时间。不知道如何修复它,这是我第一次使用媒体查询,我使用1140网格和html5任何想法如何让它来验证。
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background:url(../images/background.jpg);
margin-left:auto;
margin-right:auto;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:bold;
color:#000;
}
h4 {
font-size:18px;
}
h3 {
font-size:16px;
}
.hidden {
display: none;
}
header nav {
float:right;
width:670px;
height:70px;
margin-top: 47px;
font-family: Arial, Helvetica, sans-serif;
background-image: url(../images/nav_bar.png);
background-repeat:no-repeat;
}
nav ul li {
float: left;
cursor: pointer;
list-style-type: none;
padding-top:20px;
padding-left:40px;
text-align: left;
}
nav ul {
font:Arial, Helvetica, sans-serif;
font-size:24px;
color:#FFF;
}
nav ul li a {
color: #FFF;
text-decoration: none;
}
.logo {
margin-top:87px;
}
.lineone {
background:#000;
height:5px;
width:891px;
float:right;
margin-top:30px;
}
/*----Home----*/
.photos {
width:1140px;
margin-left:55px;;
margin-top:40px;
}
.about {
margin-top:50px;
margin-left:35px;
}
.linetwo {
background:#000;
height:5px;
width:1102px;
margin-left:35px;
margin-top:10px;
}
.contenthome {
margin-left:56px;
margin-top:20px;
}
/*----info-----*/
.lineinfo{
background:#000;
height:3px;
width:625px;
}
#mainContent {
margin-top:45px;
}
#mainContent h2 {
margin-top:50px;
}
#mainContent p {
font-family:Arial, Helvetica, sans-serif;
font-weight:lighter;
font-size:18px;
}
#mainImage{
margin-top:40px;
margin-left:20px;
}
.footer {
background-image:url(../images/footer.png);
background-repeat:no-repeat;
float:left;
padding-bottom:200px;
height:100px;
width:1129px;
margin-top:182px;
}
.footer h3 {
margin-left: auto;
margin-right:auto;
text-align:center;
padding-top:43px;
}
/* ============================= */
/* ! Layout for mobile version */
/* ============================= */
@media handheld, only screen and (max-width: 990px) {
.lineinfo {
width:90%;
}
}
@media handheld, only screen and (max-width: 900px) {
.logo{
margin-top:130px;
}
.lineinfo {
width:90%;
}
}
@media handheld, only screen and (max-width: 767px) {
.logo {
margin-top:20px;
width:90%;
height:90%;
margin-left:auto;
margin-right:auto;
}
header nav {
float:none;
margin: 20px;
margin-right:auto;
margin-left:auto;
margin-bottom:0px;
width:300px;
}
header nav ul li {
margin:auto;
height:10px;
padding-right:20px;
font-size:16px;
}
.photos {
width:75%;
}
#mainImage {
margin-right:auto;
margin-left:auto;
}
.lineinfo {
width:90%;
}
.footer {
width:90%;
background-image:url(../images/footer_media.png);
}
.footer h3{
font-size:.875em;
}
@media handheld, only screen and (max-width: 320px) {
.logo {
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:90%;
}
header nav {
float:none;
margin: 20px;
margin-right:auto;
margin-left:auto;
margin-bottom:0px;
}
header nav ul li {
width:20px;
font-size:12px;
}
.lineinfo {
width:90%;
}
#mainImage {
margin-right:auto;
margin-left:auto;
}
.footer h3 {
font-size:.875em;
}
}
答案 0 :(得分:1)
你错过了结尾括号}:
之后 @media handheld, only screen and (max-width: 767px) {
只需支架:
.footer h3{
font-size:.875em;
}
} /* here. */
@media handheld, only screen and (max-width: 320px) {