如何解决Python-Dash开发的Web应用CSS多屏幕样式适配异常问题

安全阿岳

2026-10-3

样式适配问题修复方案

1. 统一盒模型规则

首先全局添加盒模型声明，避免内边距、边框撑大元素实际宽高，引发不同设备下的尺寸偏差：

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

2. 替换不合理的相对单位

你当前垂直方向的padding、margin使用了百分比单位，CSS中百分比的上下内边距/外边距是相对于父元素的宽度计算的，不同屏幕宽度下，垂直间距会跟随宽度变化，直接导致不同设备的布局错位：

垂直方向的间距统一改用rem（相对于根节点字体大小的单位，默认1rem=16px，你可以根据自己的设计稿换算对应数值）
容器宽度添加最小、最大宽度限制，避免在极窄/极宽屏幕下尺寸异常，可使用CSS min()/max()函数简化写法

3. 增加响应式断点适配

通过媒体查询针对不同屏幕宽度调整布局规则，比如小屏设备下让容器占满大部分宽度，不需要固定33%的占比。

修改后参考CSS代码

/* 全局初始化 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#input_div {
  /* 宽度最多占屏幕33%，最大不超过450px，最小不小于280px */
  width: min(33%, 450px);
  /* 小屏自动居中 */
  margin: 0 auto 0;
  display: inline-block;
  background-color: #FFFFFF;
  text-align: center;
  /* 垂直padding改用rem，可根据实际效果调整数值 */
  padding-top: 0.8rem;
  padding-bottom: 0.5rem;
  box-shadow: 0px 0px 8px 2px #000000;
  font-family: Raleway, sans-serif;
}

#invested_amnt {
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

#est_returns {
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

#total_value {
  padding-top: 0;
  margin-top: 0;
}

/* 小屏响应式规则，屏幕宽度小于768px时触发 */
@media (max-width: 768px) {
  #input_div {
    width: 92%;
  }
}