Делаем css-doodle отзывчивым на медиа запросы - PullRequest
Новая
       30

Делаем css-doodle отзывчивым на медиа запросы

1 голос
/ 19 июня 2019

Я создал фон для своей страницы с помощью css-doodle.На полном экране это выглядит хорошо, но из-за того, как настроена моя сетка, фигуры уменьшаются вместе с экраном и становятся полностью невидимыми на разделенном экране или при моделировании мобильных устройств.Я бы хотел, чтобы они визуально всегда были одинакового размера.

Вот медиа-запрос, который я попытался добавить, но он, похоже, ничего не делает.(Я довольно новичок в RWD, поэтому я не уверен, в чем проблема.) 

@media only screen and (max-width: 600px) { 
    .doodle {
        grid: 22 / 100vmax;
        grid-gap: 20px;
    }
}

А вот мой CSS-Doodle код.

<css-doodle grid="5" class="doodle">
    :doodle {
        @grid: 50 / 100vmax;
        grid-gap: 30px;
    }

    background: white;
    opacity: @r(-1, .08);
    clip-path: polygon(51% 26%, 0% 100%, 100% 100%);
</css-doodle>

1 Ответ

1 голос
/ 19 июня 2019

На примере документов я попытался использовать em единиц вместо vmax. Codepen Demo 

html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient(to bottom, rgb(8, 36, 83), rgb(2, 91, 137));
}

.doodle {
  position: fixed;
  z-index: -1;
  animation: spin 200s infinite;
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 600px) {
  .doodle {
    @grid: 25 / 100em;
    grid-gap: 20px;
  }
}
 <css-doodle grid="5" class="doodle">
    :doodle {
      @grid: 50/100em;
      grid-gap: 30px;
    }
    background: white;
    opacity: @r(-1, .08);
    clip-path: polygon(51% 26%, 0% 100%, 100% 100%);
    animation: flow @r(10s, 50s) infinite linear;
        
    @keyframes flow {
      0%, 100%{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)   
      }
      50% {
        -webkit-transform: translate3d(@r(-500%, 1000%), @r(-500%, 1000%), 0);  
        transform: translate3d(@r(-500%, 1000%), @r(-500%, 1000%), 0);       
      }
    }
  </css-doodle>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.7.1/css-doodle.js"></script>
...