html - 无法让@media 屏幕工作

Question

早些时候我问了关于我的个人资料设计的问题，我说我没有在手机上使用相同的设计但我改变了主意，但是我使用 height:10%;主样式中的横幅，但是当使用 @media all 和 (max-width:1024;){} 并且具有相同的类但具有 height:30%; 时，它不会改变。我有一个不同的 css，我在其中做同样的事情，但它可以工作(大多数时候)。

html:

<?php if($user_visible == 'a'){ ?>
  <!--Profile picture, banner, and main information-->
    <div class="profile-wrapper">
      <?php if(isset($user_avatar)){ echo'<img class="banner" src="/assets/images/banner/'.$user_banner.'" />'; }else{ echo'<img class="banner" src="/assets/images/banner/default.png" />'; }?>
      <!--profile picture-->
      <?php if(isset($user_avatar)){ echo'<img class="avatar" src="/assets/images/users/'.$user_avatar.'" />'; }else{ echo'<img class="avatar" src="/assets/images/users/default.png" />'; }?>

      <!--user information-->
      <div class="user-information">
        <p><?php echo $user_name; ?><br />
        <?php echo $user_firstname; ?>&nbsp;<?php echo $user_lastname; ?></p>
      </div>
    </div>

CSS:

/* **************************************************************************************
///////////////////////Main Style////////////////////////////////////////////////////////
************************************************************************************** */
@media all and (min-width:1024px;) {
    .avatar {
        border: 2px solid #fff;
        border-radius:5px;

        margin-top:-10%;
        margin-left: 5%;

        width:15%;
        height:auto;
    }

    .banner {
        border: 2px solid #fff;
        border-radius:5px;

        margin-top: 20px;

        height:10%;
        width:100%;
    }

    .profile-wrapper {
        margin:0 auto;
        width:90%;
    }
}


/* **************************************************************************************
///////////////////////Tablet////////////////////////////////////////////////////////////
************************************************************************************** */
@media all and (max-width: 1024px) {
    .banner { height:30%; }
}



/* **************************************************************************************
///////////////////////Phone/////////////////////////////////////////////////////////////
************************************************************************************** */
@media all and (max-width: 768px) {
    .banner { height:30%; }
}

Answer 1

这些是最通用的媒体查询，因为它们将帮助您适本地覆盖大多数不同的屏幕尺寸:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

因此，为您的横幅尝试这些媒体查询:

    @media(min-width:992px){
    .banner {
       height: 30%;
    }
}
          @media(min-width:1200px){
          .banner {
          height: 10%;
        }
}