移动端网页输入框与按钮显示异常，求纯CSS响应式适配方案

• 添加视口元标签
  这是移动端适配的基础，必须放在HTML的<head>中，让浏览器正确识别设备宽度并适配：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 替换固定单位为相对单位
  把输入框、按钮等元素的固定px单位换成相对单位（如rem、百分比），同时用max-width限制PC端的最大宽度，避免过度拉伸：

  /* 输入框样式调整 */
  .input-container input {
    width: 90%;
    max-width: 450px;
    padding: 0.8rem;
    font-size: 1rem;
    box-sizing: border-box;
  }
  
  /* 按钮样式调整 */
  .convert-btn {
    padding: 0.8rem 1.6rem;
    font-size: 1rem;
    width: fit-content;
    min-width: 120px;
  }
  

• 使用媒体查询做针对性适配
  针对移动端屏幕（如宽度≤768px）单独调整元素样式，优化布局和交互：

  @media (max-width: 768px) {
    /* 容器内边距缩小，适配小屏幕 */
    .main-container {
      padding: 1rem;
    }
  
    /* 按钮占满屏幕宽度，提升点击区域 */
    .convert-btn {
      width: 90%;
      margin-top: 0.8rem;
    }
  
    /* 专辑元素自适应缩小 */
    .album-card {
      width: 90%;
      margin: 1rem auto;
    }
  }
  

• 全局盒模型重置
  给所有元素添加box-sizing: border-box，避免padding和border撑开元素宽度导致溢出：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

• 专辑封面自适应调整
  确保专辑封面保持宽高比，在移动端自动缩放：

  .album-cover {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
  }
  

按照以上步骤修改后，移动端的输入框、按钮及专辑元素会自适应屏幕尺寸，解决显示异常问题。

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