如何使用CSS优化响应式尺寸与定位，保证聊天应用按钮跨屏显示效果

核心问题原因 #

当前实现将输入框和按钮分别做绝对定位，且尺寸、位置完全依赖vw单位，屏幕宽度变化时两个元素的相对位置、自身尺寸都会不成比例缩放，自然会出现错位、大小异常的问题。

优化方案 #

1. HTML结构调整 #

将输入框和按钮包裹在同一个父容器内，用父容器统一做页面定位，内部用flex布局控制两个元素的相对位置，确保二者永远保持固定间距，不会错位。
修改后的HTML代码：

<html lang="en">
    <!-- Required Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Hello, I'm Tim. A Frontend Web Developer, always curious, learning and growing my skills in web design, data, analytics and software in general.">
    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css">
    
    <head>
        <style>@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght@400;500;700&display=swap');</style>
    </head>
    <body>
        <!-- 新增父容器 -->
        <div class="header__input-wrapper">
            <div id="header__chat">
                <h1 class="typing">Text Goes Here.</h1>
            </div>
            <div id="header__btn">
                <h2>Send</h2>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js" integrity="sha512-SttpKhJqONuBVxbRcuH0wezjuX+BoFoli0yPsnrAADcHsQMW8rkR84ItFHGIkPvhnlRnE2FaifDOUw+EltbuHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="js/script.js"></script>
    </body>
</html>

2. CSS样式调整 #

• 父容器统一做绝对定位，内部用flex布局控制子元素排列
• 用clamp()函数限制字体、容器的最小/最大尺寸，避免极端屏幕下尺寸异常
• 移除两个子元素的绝对定位、vw宽度限制，输入框自动占满剩余空间，按钮尺寸由内容加内边距自适应
  修改后的CSS代码：

//FONTS
$heading-font: 'Roboto', sans-serif;
$main-font: 'Open Sans', sans-serif;

//COLORS
$btn-blue: #35A7FF;

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; // 避免内边距撑大容器尺寸
}

// 新增父容器样式
.header__input-wrapper {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    max-width: 1100px;
    min-width: 300px; // 小屏下最小宽度限制
    display: flex;
    align-items: center;
    gap: 16px; // 输入框和按钮的固定间距
}

#header__chat {
    flex: 1; // 占满父容器剩余空间
    padding: 20px 24px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 50px;
}

#header__btn {
    padding: 20px 32px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 50px;
    background-color: $btn-blue;
    color: white;
    cursor: pointer;
    h2{
      font-size: clamp(14px, 2vw, 20px); // 最小14px，最大20px，中间随屏幕缩放
      text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
      text-transform: uppercase;
    }
}

h1 {
    font-size: clamp(24px, 5vw, 52px); // 最小24px，最大52px，中间随屏幕缩放
    font-family: $heading-font;
}

h2 {
    font-family: $heading-font;
}

.typing {
    width: 12ch;
    animation: typing 2s steps(22), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
}
  
@keyframes typing {
  from {
    width: 0
  }
}
      
@keyframes blink {
  50% {
    border-color: transparent
  }
}

优化效果 #

• 输入框和按钮永远保持固定间距，不会因为屏幕缩放错位
• 按钮大小在小屏下不会缩的过小，大屏下也不会无限放大，和桌面端视觉效果基本一致
• 整体布局始终水平居中，适配所有屏幕宽度

内容的提问来源于stack exchange，提问作者TimW