如何使这种布局在所有屏幕尺寸上都能工作？

问题描述

我有一个棘手的CSS要求。在Bootstrap列的内部，我需要连续放置2个相等的 squares （正方形），每行中有3位文本。起初这很容易，但是事实证明要适应不同的屏幕尺寸非常困难-主要是因为字体大小是一个很大的因素。

这是我的屏幕上的样子，基本上是它在大屏幕和小屏幕上的外观（仅按比例缩放）：

这是当前的HTML：

<div class="row basic-ratings-layout">
    <div class="col-md-6 no-stretch"><div class="stock-rating negative"><div class="stock-rating-inner">
                            Shares <span class="stock-rating-unit">- Mil</span> <div class="stock-rating-start-end"><div>490.68</div> <div>to</div> <div>892.46</div></div> <div class="stock-rating-change">
                                increased by 81.88%
                            </div></div></div></div>
    <div class="col-md-6 no-stretch"><div class="stock-rating negative"><div class="stock-rating-inner">
                            Margin % <span class="stock-rating-unit"></span> <div class="stock-rating-start-end"><div>5.50</div> <div>to</div> <div>2.25</div></div> <div class="stock-rating-change">
                                decreased by 59.09%
                            </div></div></div></div>
</div>

以及当前的CSS（使用SASS）：

.basic-ratings-layout {
    .col-md-6 {
      padding-left: 5px;
      padding-right: 5px;
      .stock-rating {
        position: relative;
        margin: auto;
        border-radius: 4px;
        width: 100%;
        padding-top: 100%;
        text-align: center;
        margin-bottom: 10%;
        .stock-rating-inner {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          .stock-rating-change {
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 0;
            font-size: 0.8em;
          }
          .stock-rating-unit {
            font-size: 0.8em;
            opacity: 0.7;
          }
          .stock-rating-start-end {
            font-size: 1.1em;
            line-height: 1.4;
            padding-top: 10%;
          }
        }
        &.negative {
          border: 2px solid $red;
          .stock-rating-change {
            color: $red;
          }
        }
      }
    }
  }

问题是双重的：

缩放字体大小，使其始终合适（特别是防止底线溢出）
保持垂直对齐-中间部分根据屏幕尺寸上下移动

做到这一点的最佳方法是什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html twitter-bootstrap