0
モバイルアプリのホームページにグリッドレイアウトを作成したいと思います。サードパーティのライブラリを使用せずにやりたいと思います。モバイルアプリのタイルホームページのシンプルなGRIDレイアウトCSS + HTMLのみ
私はいくつかの例をオンラインで見つけましたが、それらはすべて欠陥があるようです。私の場合のように、高さは固定されています。実際のフルスクリーンの高さと幅実行中のモバイルの不動産。私はそれがすべてのプラットフォーム上で見てみたいどのよう
：
上記画像がアップすべてのラインラッキーシナリオですが、できるだけ早く私はタイルにPNG画像を追加すると、それを取得オフ。ここで
は私の試みです。また
.tileCollector {
\t padding-left:3px;
\t padding-right:3px;
\t width: 100%;
\t height:100%;
\t table-layout: fixed;
}
.homepageStatus {
\t background-color: #4d82b8; /*var(--color5);*/
\t height:100%;
\t padding:30px;
}
.StatusMessage1 {
\t display:block;
\t padding-left: 1.0vh;
\t font-size: calc(1em + 5vmin);
\t line-height:1.5em;
\t white-space:nowrap;
\t font-family: 'Open-Sans';
\t color:white;
}
.StatusMessage2 {
\t display:block;
\t padding-left: 1.0vh;
\t font-size: calc(1em + 5vmin);
\t line-height:1.5em;
\t white-space:nowrap;
\t font-family: 'Open-Sans';
\t color:white;
}
.StatusMessage3 {
\t display:block;
\t padding-left:1.0vh;
\t font-size: calc(1em + 5vmin);
\t line-height:1.5em;
\t white-space:nowrap;
\t font-family: 'Open-Sans';
\t color:white;
}
.tileIcon {
\t padding-top:30px;
\t color:white;
\t height:50%;
}
.tileContainer {
\t padding:5px;
}
.tile {
\t font-size: 30px;
\t color:white;
\t width: 100%;
height: 100%;
}
div#tileTopLeft {
\t background-color: #FFC000; /*var(--color1);*/
}
div#tileTopRight {
\t background-color: #92D050; /*var(--color2);*/
}
div#tileBottomLeft {
\t background-color: #A6A6A6; /*var(--color3);*/
}
div#tileBottomRight {
\t background-color: #FF5050; /*var(--color4);*/
}
.tile-icon-label {
\t font-family:'Oswald';
}<table class="tileCollector">
<tr colspan=2 height="40%">
<td colspan=2 class="tileContainer" id="StatusContainer">
<div id="homepageStatusDiv" class="homepageStatus">
<span class="StatusMessage1">Message 1</span>
<span class="StatusMessage2">Message 2 </span>
<span class="StatusMessage3">Message 3</span>
</div>
</td>
</tr>
<tr height="30%" >
<td class="tileContainer">
<div class="tile" id="tileTopLeft" ng-click="">
<table style="width:100%;height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<img class="tileIcon" src="icons/frontpage/icon1.png" class="contrast"/>
</td>
</tr>
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<span class="tile-icon-label">Option 1</span>
</td>
</tr>
</table>
</div>
</td>
<td class="tileContainer">
<div class="tile" id="tileTopRight">
<table style="width:100%;height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<img class="tileIcon" src="icons/frontpage/icon2.png" class="contrast"/>
</td>
</tr>
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<span class="tile-icon-label">Option 2</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr height="30%">
<td class="tileContainer">
<div class="tile" id="tileBottomLeft">
<table style="width:100%;height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<img class="tileIcon" src="icons/frontpage/icon3.png" class="contrast"/>
</td>
</tr>
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<span class="tile-icon-label">Option 3</span>
</td>
</tr>
</table>
</div>
</td>
<td class="tileContainer">
<div class="tile" id="tileBottomRight">
<table style="width:100%;height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<img class="tileIcon" src="icons/frontpage/icon4.png" class="contrast"/>
</td>
</tr>
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<span class="tile-icon-label">Option 4</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>、 "オプション＃" テキストの上、右の真ん中に、すべてのタイル内のPNG画像が存在することになります。私はこれらもサイズ変更可能で、反応がよく、テキストも好きです。 これは可能ですか？
私はテーブルのアイデアを完全に捨ててdivにするか、実際の違いはありませんか？