如何调整基于引导程序的CSS代码,以便它对页面宽度更敏感？

Question

我创建了这个小提琴,因为你可以看到我有一个有两个文本的网页,一个在另一个下面.它在宽屏幕上运行良好,但是当我收缩网页 - 或者在移动设备上运行网页时 - 它就搞砸了,就像在这个屏幕截图上一样:

我想通过添加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),使它们在小屏幕上不重叠.

注意:这对移动设备来说不是很好.

Answer 2

在你的小提琴中，你设置每个div的高度（inner1和inner2），当你将页面宽度压缩到大约150px（你的图片）时，div就会溢出。设置元素的高度并不常见，至少从我的经验来看是这样。在移动平台上，宽度通常更受关注。

在你的CSS中为每个div设置overflow属性解决了我的问题。

.inner1{
  width:100%;
  height:270px;
  margin-bottom:0px;
overflow: auto;
}
.inner2{
  width:100%;
  height:280px;
  margin-bottom:0px;
  overflow: auto;
}

这是溢出属性的参考。使用 auto 至少允许滚动并且不会切断文本。 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Bootstrap 实际上有一个网格系统，其确切目的是使宽度值响应屏幕尺寸。 http://v4-alpha.getbootstrap.com/layout/grid/

另外，设置手机的视口宽度将加载CSS以手机的实际屏幕宽度运行，而不是屏幕的像素密度宽度： https: //developer.mozilla.org/en-US/docs/ Mozilla/移动/Viewport_meta_tag