Блог

Главная - Вопросы по программированию - Не удается заставить @media screen работать

Не удается заставить @media screen работать

#html #css

#HTML #css

Вопрос:

Ранее я задавал вопрос о дизайне моего профиля, мне сказали, что я не собираюсь использовать тот же дизайн на мобильном телефоне, но я передумал, как я использую 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; ?>amp;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%; }
}

Комментарии:

1. Я заметил, что забыл удалить @media стиль under main, который был частью последнего теста, который я провел до того, как пришел сюда

2. Удалите это; из вашего медиа-запроса это должно быть (min-width: 1024px), а не (min-width: 1024px;)

Ответ №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%;
        }
}