Question

早些时候我问过关于我的个人资料设计的问题，我说我没有在手机上使用相同的设计，但是我改变了主意，不过我在主要风格的横幅上使用height:10%;但是当使用@media all and (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%;
        }
}

无法让@media屏幕工作

1 个答案: