Question

前端开发相当新，但是我的媒体查询遇到了我目前正在处理的暂停页面的问题。

我正在尝试为iPhone 5纵向创建媒体查询，但是当我这样做时，它要么不起作用（它似乎被我的其他媒体查询覆盖）。我已经尝试将其移到我的其他媒体查询之上但是当我这样做时，它似乎也会引起与它们的冲突。我已将其放入下面的媒体查询代码中。非常感谢您的所有帮助！

@media all and (max-width: 700px) {


    header {
          background-position: 100% 100%; 
    }     


   h2 {

        padding: 0px 25px 0px 25px;


     }


    h3 {
        font-size: 10px;
        padding: 20px 25px 0px 25px;


    }

    p { 
    text-align: center;
    color: white;
    font-size: 13px;
    font-weight: 400;   
    line-height: 1.4em;


}



.column{

    margin: 30px 0;
    float: none;
    width: 100%;
    display: block;
    padding-top: 10px;




}

h1  { 
    position: absolute; 
    max-width: 350px;
    left: 50%;
    top: 50%; 


    margin-left: -175px;  
    margin-top: -132px;

}



@media only screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation : landscape) { 


h1  { 


    position: absolute; 
    max-width: 200px;
    left: 70%;
    top: 90%; 


    margin-left: -175px;  
    margin-top: -132px;



}


p { 
    text-align: center;
    color: white;
    font-size: 10px;
    font-weight: 400;   
    line-height: 1.3em;

}


.column {


    width: 18%;
    margin: 30px auto;
    display: inline-block;  
    padding-top: 1px;
    padding-bottom: 20px;
    text-decoration: none;
    border: none;
    margin: 10px  

}


  .column a {
    text-decoration: none;
    border: none; 




}


   h2 {

    font-size: 23px;
    text-transform: uppercase;
    font-family: Gotham-Bold, sans-serif; 
    font-weight: lighter;
    line-height: 30px;
    margin-top: 16px;
    text-align: center;
    color: white;



}


.hero-arrow {
    position: absolute;
    bottom: 10px;
    left: 50%;      
    margin-left: -22px;
    max-width: 25px;


}

h3 {

    padding: 8px 12px 10px 12px;


}


footer{
    text-align: center;
    font-size: 12px; 
    color: #ffffff;     
    padding-bottom: 9px;
    padding-top: 9px;   
    background-color: #AFA59C;  
    font-size: 7px;


}

footer p {
    margin-top: 20px;
    font-size: 7px; 
    text-align: center;
}




}

/*iphone portrait*/
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation : portrait) { 


h1  { 
    position: absolute; 
    max-width: 300px;
    left: 50%;
    top: 50%; 


    margin-left: -175px;  
    margin-top: -132px;

}

Answer 1

this.location = $location

媒体查询似乎无法有效运作

1 个答案: