移动端textarea尺寸过小问题求助：实现与input尺寸统一

架构老林

2026-7-11

解决移动端textarea尺寸异常问题

问题分析

你的代码中桌面端textarea样式正常，但移动端媒体查询的尺寸设置未生效，导致textarea偏小。核心原因包括：

CSS优先级冲突：默认样式里的textarea元素选择器，和媒体查询中的input,textarea选择器优先级相同，若触发条件偏差或浏览器解析优先级差异，会导致样式未覆盖。
HTML属性干扰：textarea的cols和rows属性会提供默认尺寸基准，可能抵消CSS的尺寸设置。
盒模型不一致：input默认采用border-box盒模型，textarea若未设置，padding和border会额外增加实际尺寸，视觉上和input不一致。

解决方案

1. 提升移动端样式优先级

利用textarea的id="answer"，在媒体查询中使用ID选择器，确保样式能覆盖默认设置：

@media (max-width: 768px) { /* 根据你的移动端断点调整 */
  input, #answer {
    width: 63vw;
    height: 30px;
    box-sizing: border-box; /* 统一盒模型 */
  }
}

2. 移除HTML中的cols和rows属性

删除textarea标签里的rows="1"和cols="25"，让CSS完全控制尺寸：

<textarea name="" id="answer" disabled></textarea>

3. 统一默认样式的盒模型

在全局textarea样式中添加box-sizing: border-box，确保和input的盒模型一致：

textarea{
    resize:none;
    background: black;
    outline : none;
    margin: 1% 0;
    border : 1px solid blueviolet;
    color: lavender;
    height : 3.1vh;
    width: 215px;
    padding: 3px 4px;
    font-size: 1rem;
    box-sizing: border-box; /* 添加此行 */
}