адаптивный сайт с использованием селекторов потомков - PullRequest
Новая
       7

адаптивный сайт с использованием селекторов потомков

0 голосов
/ 26 мая 2018

я пытаюсь сделать мой сайт отзывчивым, используя медиа-запросы, однако страница не отвечает, когда я использовал селектор потомков в некоторых частях моего кода.

Страница реагирует, когда я использую этот код: 

.div1{
  float: left;
  width:20%;
  height: 200px;
  background-color:red;
  border: 1px solid #f2f2f2;
  margin-left: 2%;
  border-radius: 50%;
}


.div2{
   float: left;
   width:20%;
   height: 200px;
   background-color:yellow;
   border: 1px solid #f2f2f2;
   margin-left: 2%;
   border-radius: 50%;
   }



 .div3{
     float: left;
     width:20%;
     border-radius: 50%;
     height: 200px;
     background-color:blue;
     border: 1px solid #f2f2f2;
     margin-left: 2%;
     }



  /* media queries*/
   @media screen and (max-width:800px) {
  .sec1 div{
   width:40% ;

    }
   }

всякий раз, когда я использую этот код, страница становится более отзывчивой: 

.sec1 .div1{
  float: left;
  width:20%;
  height: 200px;
  background-color:red;
  border: 1px solid #f2f2f2;
  margin-left: 2%;
  border-radius: 50%;
}


.sec1 .div2{
   float: left;
   width:20%;
   height: 200px;
   background-color:yellow;
   border: 1px solid #f2f2f2;
   margin-left: 2%;
   border-radius: 50%;
   }



 .sec1 .div3{
     float: left;
     width:20%;
     border-radius: 50%;
     height: 200px;
     background-color:blue;
     border: 1px solid #f2f2f2;
     margin-left: 2%;
     }



  /* media queries*/
   @media screen and (max-width:800px) {
  .sec1 div{
   width:40% ;

    }
   }

Обратите внимание, что разница между кодами заключается в добавлении класса sec1 перед классами div (перед носителямизапрос).Мой вопрос: почему не работает последний код?

...