我想使用媒体查询根据元素的大小调整元素的大小div.我不能使用屏幕大小,因为div它只是像网页中的小部件一样使用,其大小可能会有所不同.

更新

看起来现在正在做的工作:https: //github.com/ResponsiveImagesCG/cq-demos

是否可以在CSS中使用calc()函数来操作十六进制颜色值？在下面的CSS片段中,我想使用--enable变量在MyBtnStyle的background-color属性的两个十六进制颜色值之间切换:-- enable -color和--disable-color.当使用rgb(r,g,b)颜色格式时,可以使用calc()计算每个颜色分量,但我更喜欢直接在十六进制颜色值之间切换.

    :root {
        --enable: 0;
        --disable-color: #ff0000;
        --disable-r: 255;
        --disable-g: 0;
        --disable-b: 0;
        --enable-color: #00ff00;
        --enable-r: 0;
        --enable-g: 255;
        --enable-b: 0;
    }

    .MyBtnStyle {
        width: 100%;
        height: 100%;
        text-align: center;
        border: 2px;
        margin: 1px 1px;
        color: black;
        padding: 1px 1px;
        background-color: calc(var(--enable-color)*var(--enable) + var(--disable-color)*(1 - var(--enable))); 
    }

/* this works */
    /* rgb( calc(var(--enable-r)*var(--enable) + var(--disable-r)*(1 - var(--enable)) ), 
            calc(var(--enable-g)*var(--enable) + var(--disable-g)*(1 - var(--enable)) ), 
            calc(var(--enable-b)*var(--enable) + var(--disable-b)*(1 - var(--enable)) )) */

在这里研究了一些问题，但它们并不能完全解决我正在寻找的问题。

假设我有一个网站并且我想要。在桌面上我想要这个：

这很容易。grid-template-columns: repeat(3, 33%)（基本上）

然而，在移动设备上，我想要这个

我遇到的情况发生在它翻转到单个列之前：

我正在尝试clamp()，minmax()以及各种各样的事情，但没有任何事情能够按照我想要的方式进行。是的，我完全可以使用媒体查询，但我希望使用现代CSS（如clamp、grid、minmax等）创建一个真正流畅的网格/柔性布局，这样就不需要媒体查询来进行基本的布局更改。

我知道这不起作用，但作为请求的起点，这是我 100 次尝试之一的简单版本:) 在这个版本中，我尝试使用钳位从重复（3）切换到重复（1）。

.wrapper {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: blue;
}

<div class="wrapper">
  <div class="item one"><h3>Example A</h3></div>
  <div class="item two"><h3>Example Two</h3></div>
  <div class="item three"><h3>Third Example</h3></div>
</div>