使 css-doodle 响应媒体查询

Question

我已经使用 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>

Answer 1

使用示例docs, I tried using em units instead of 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>

使 css-doodle 响应媒体查询

Making css-doodle responsive with media queries

html

css

media-queries

responsive-design

css-doodle