1

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

1 回答 1

3

使用文档的示例，我尝试使用em单位而不是vmax. Codepen 演示

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>

于 2019-06-19T14:04:36.200 回答