针对Android的不同屏幕尺寸运行布局

Question

我的应用程序是在离子1框架中创建的。 创建此按钮的我的应用程序将使用不同大小的屏幕运行。

对于7英寸的屏幕，图标和文字往往倾斜到顶部。

对于5英寸，图标和单词倾向于倾斜到底部

有两个要求：

1. 以所有屏幕尺寸为中心的图标和文字（在六个方框内）。

2. 当屏幕尺寸较大时，图标/单词看起来较大，而当屏幕较小时，单词和图标会变小。原因是包含图标/单词的6平方将取决于屏幕尺寸。

以下是我的代码

HTML

 <div id="row2" class="row">
    <a class="col">
      <div class="colwrapper">
        <i class="material-icons">&#xE06D;</i>
        <span>Watchlist</span>
      </div>
    </a>
    <a class="col">
      <div class="colwrapper">
        <i class="material-icons">&#xE8B6;</i>
        <span>Search</span>
      </div>
    <a class="col">
      <div class="colwrapper">
        <i class="ion-stats-bars"></i>
        <span>Top Movers</span>
      </div>
    </a>
  </div>

  <div id="row3" class="row">
    <a class="col">
      <div class="colwrapper">
        <i class="icon ion-medkit"></i>
        <span>Portfolio Diagnosis</span>
      </div>
    </a>
    <a class="col" >
      <div class="colwrapper">
        <i class="material-icons">&#xE152;</i>
        <span>Screener</span>
      </div>
    </a>
    <a class="col">
      <div class="colwrapper">
        <i class="material-icons">&#xE417;</i>
        <span>Snapshot</span>
      </div>
    </a>
  </div>

CSS

#row2 .col .colwrapper, #row3 .col .colwrapper{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 55%;
  width: auto;
  text-align: center;
  margin-top: 25px;
}
#row2 .col .colwrapper i, #row3 .col .colwrapper i{
  font-size: 30px;
}
#row2 .col img, #row3 .col img{
  position: relative;
  display: block;
  height: 75%;
  width: auto;
  left: 0;
  right: 0;
  margin: auto;
}
#row2 .col span, #row3 .col span{
  display: block;
}