0

私の他のすべてのモバイル デバイス メディア クエリは、最後のものだけを検証し、どこにも答えを見つけることができなかったようです。私はしばらくこれに固執していました。修正方法がわかりません。メディアクエリを使用するのはこれが初めてで、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;
}
}
4

1 に答える 1

1

セクションの後の最後の括弧}を見逃しました：

 @media handheld, only screen and (max-width: 767px) {

ブラケットを付けてください：

   .footer h3{ 
       font-size:.875em;
    }
 } /* here. */

    @media handheld, only screen and (max-width: 320px) {
于 2012-11-14T06:05:08.543 に答える