javascript - 如何调整基于 Bootstrap 的 css 代码，使其对页面宽度的响应速度更快？

Question

我创建了 this fiddle如您所见，我有一个包含两个文本的网页，一个在另一个下面。它在宽屏上运行良好，但是当我缩小网页 - 或者在移动设备上运行网页时 - 它搞砸了，就像这个截图:

我考虑通过添加 CSS 移动查询来提高响应速度，但随后在我的代码中:

@media (max-width: 545px) {


.outer{
  width:100%;
  height:330px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:320px;
  margin-bottom:0px;

}
.inner2{
  width:100%;
  height:330px;
  margin-bottom:0px;

}
}

@media (max-width: 435px) {

.outer{
  width:100%;
  height:380px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:370px;
  margin-bottom:0px;

}
.inner2{
  width:100%;
  height:380px;
  margin-bottom:0px;

}

}

@media (max-width: 378px) {

 .outer{
  width:100%;
  height:460px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:450px;
  margin-bottom:0px;

}
.inner2{
  width:100%;
  height:460px;
  margin-bottom:0px;

}

} 

等等，所以很多值适用于不同的屏幕宽度。我怀疑还有其他一些方法可以做到这一点，这是我不需要在移动 CSS 中分别覆盖每个屏幕宽度的最灵敏的方法…… 你能给我任何提示吗？我该如何更改我的代码，以便它在任何设备/屏幕宽度上独立工作？ 谢谢!

Answer 1

为每个类设置最小宽度和高度，以便页面停止调整屏幕分辨率太小的文本。添加最小高度:123px；和最小宽度:456px； (根据需要调整 px)以便它们在小屏幕上不会重叠。

注意:这对移动设备不是很好。