gpt4 book ai didi

html - 使 css-doodle 响应媒体查询

转载 作者:行者123 更新时间:2023-11-28 14:09:55 25 4
gpt4 key购买 nike

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

最佳答案

使用 docs 的例子,我尝试使用 em 单位而不是 vmaxCodepen 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>

关于html - 使 css-doodle 响应媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56664554/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com