.NET 開発者として、私は常に DIV+CSS に抵抗してきました。当初はasp.netで開発しており、フロントページのレイアウト作業はアーティストに丸投げでした。その後、私自身のビジネスのフロントエンドが Extjs で開発されたため、レイアウトにあまりエネルギーを費やす必要がなくなりました。そのため、私は DIV+CSS に慣れておらず、その結果、臆病になってしまいました。そのため、Appcan の学習を初めて開始する場合は、レイアウトをスキップできます。しかし、実際の開発プロセスでは、基本的なUIフレームワークを理解していないと開発を進めるのは非常に困難であることがわかります。頑張って公式の「UI Basic Framework Documentation」を何度か読みましたが、ほとんどが理解できませんでした。
最終的に、開発が徐々に進んでいくにつれて、Appcan 初心者が最も混乱しやすい場所でもある最も重要な事柄のいくつかに気づきました。
1. フレキシブル ボックス: これは、携帯電話でより一般的に使用されるレイアウトです。従来の「フローレイアウト」との最大の違いは、「エラスティックボックスモデルは、指定されたサイズの親コンテナ内に子要素のスペースを割り当てる」という点です。親コンテナは携帯電話の画面サイズとして認識されており、子要素がいくら大きくても親コンテナのウィンドウサイズは分かりません。これは通常、フローティング ウィンドウで使用されます。
2. ub 、ub-con 、ub-f およびその他の属性: 公式ドキュメントでは、これらの属性についての説明に多くの時間が費やされています。最初は雲と霧が見えましたが、ネット上では見つかりませんでした。最後に、「ub」のプロパティは CSS プロパティに属さず、Appcan 自体によってカプセル化されていることがわかりました。その目的は、開発を容易にすることです。ub-f1 が実際にあるのと同じように
.ub-f1
{
位置:相対;
-webkit-box-flex: 1;
ボックスフレックス: 1;
}
これらの CSS パッケージは、プロジェクトの ui-box.css にあります。
したがって、いくつかの公式パッケージの属性を理解することで、開発の進行をスピードアップできます。
3. 携帯電話の画面によって解像度が異なるため、フォント サイズをピクセルで定義すると、携帯電話によってサイズが異なります。したがって、 Appcan ではサイズemを定義できます。たとえば、解像度 320x480 の携帯電話では、16px のフォント サイズが基準として使用されます。解像度480x800の端末ではフォントサイズ24pxを目安とします。すべての要素のサイズは、基準量の相対比によって定義されます。CSS で対応するのは em です。次に、解像度 320x480 では 1em=16px、解像度 480x800 では 1em=24px となります。