带有网格或弹性框的响应式输入+按钮（无媒体查询）

Question

我在使用 Flexbox 或网格布局进行某些 CSS 分发时遇到了麻烦，事情是这样的：

我有一个具有下一个配置的容器（75％输入，25％按钮）：

该配置应该是桌面和大屏幕的主要配置。

但是，要求是，一旦容器达到移动宽度，容器应该改变元素的比例（50%输入，50%按钮）：

这可以通过媒体查询轻松实现，但要求仅使用网格 CSS 或 Flexbox（或两者，除了媒体查询之外的任何内容）

这是一些简单的 HTML 和 CSS 尝试

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="index.css">
            <title>Document</title>
        </head>
    <body>
        <div class="container">
            <input type="text" class="input" />
            <button class="button">Button</button>
          </div>
    </body>
    </html>

CSS 1（第一次尝试，flexbox）：

    * {
      box-sizing: border-box; /* Include padding and borders in width calculations */
    }

    .container {
      display: flex;
      width: 100%; /* Full width of the parent */
    }

    .input {
      flex-grow: 1;      /* Input can grow to fill space */
      flex-shrink: 1;    /* Input can shrink */
      flex-basis: 75%;   /* Start at 75% width */
      min-width: 50%;    /* Minimum width is 50% */
    }

    .button {
      flex-grow: 0;      /* Button does not grow */
      flex-shrink: 1;    /* Button can shrink */
      flex-basis: 25%;   /* Start at 25% width */
      min-width: 25%;    /* Minimum width is 25% */
      max-width: 50%;    /* Maximum width is 50% */
    }

CSS 2（第二次尝试，使用 CSS 网格）：

    * {
      box-sizing: border-box; /* Include padding and borders in width calculations */
    }

    .container {
      display: grid;
      grid-template-columns: 75% 25%; /* Initial layout for desktop */
      width: 100%; /* Full width of the parent */
    }

    .input {
      min-width: 50%; /* Input can shrink to a minimum of 50% */
    }

    .button {
      min-width: 25%; /* Button maintains a minimum width of 25% */
    }

问题是，桌面和移动设备中的比例保持在 75% 到 25%（75% 输入，25% 按钮）（缩小屏幕时不会改变，或者桌面和移动设备中的比例保持在 50% - 50%（不拉伸）切换到桌面时，但仅通过一种代码实现无法实现不同屏幕尺寸下的两种行为

我的问题是，这个问题可以用普通的 CSS 网格或/和 Flexbox 来解决吗？或者这只能通过媒体查询来实现？

提前致谢！

Answer 1

您可以使用 CSS calc、clamp 和 cqw 单元来完成此操作，无需媒体查询。

如果宽度低于 600px，此代码段将变量 --w 设置为 0cqw [在本例中定义为“移动”，更改为您认为的移动宽度]；如果宽度高于 600px，则设置为 1cqw。

使用此计算输入和容器的宽度。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <title>Document</title>
  <style>
    .container {
      width: 100%;
      --w: clamp(0cqw, calc(100vw - 600px), 1cqw);
      display: flex;
      gap: 0;
    }
    /* --w is 0cqw if the viewport is less than 600px wide otherwise it is 1cqw*/
    
    .input {
      width: calc((var(--w) * 75) + ((1vw - var(--w)) * 50));
    }
    
    .button {
      width: calc((var(--w) * 25) + ((1vw - var(--w)) * 50));
    }
  </style>
</head>

<body>
  <div class="container">
    <input type="text" class="input" />
    <button class="button">Button</button>
  </div>
</body>

</html>

带有网格或弹性框的响应式输入+按钮（无媒体查询）

问题描述投票：0回答：1

1个回答

最新问题

带有网格或弹性框的响应式输入+按钮（无媒体查询）

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1