0

基本的に電卓アプリ。ターミナル/テキストフィールドを上に。その下のボタンの 4x4 グリッド。すべてがどの画面にも収まるようにスケーリングする必要があります。私はこれが非常にオープンエンドであることを知っています。回答は一般的なものにすることができます。テーブルを使う？部門？どんな表示？修理済み？どのようにアプローチするのが最善かわかりません。

4

4 に答える 4

1

テーブルを使用しないでください。

レスポンシブ Web デザインを検討したい。

http://www.alistapart.com/articles/responsive-web-design/

グリッドシステムを使用します。いくつかをチェックして、あなたがしていることに何が合っているかを確認してください。グリッドを柔軟にする必要があるため、ピクセルベースではなくパーセンテージベースになります。そうすれば、メディア クエリのブレーク ポイントに依存して幅を変更する必要がなくなります。ビューポートの幅に合わせて柔軟に変更できます。

例 (

      .onecol    { width: 5.801104972%;  }       
      .twocol    { width: 14.364640883%; }       
      .threecol  { width: 22.928176794%; }       
      .fourcol   { width: 31.491712705%; }       
      .fivecol   { width: 40.055248616%; }      
      .sixcol    { width: 48.618784527%; }       
      .sevencol  { width: 57.182320438000005%; } 
      .eightcol  { width: 65.74585634900001%; }  
      .ninecol   { width: 74.30939226%; }       
      .tencol    { width: 82.87292817100001%; }  
      .elevencol { width: 91.436464082%; }      
      .twelvecol { width: 99.999999993%; }       

      /* layout & column defaults */
      .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
        position: relative;
        float: left;
        margin-left: 2.762430939%;
      }

      .first {
        margin-left: 0;
      }

      .last {
        float: right;
      }

したがって、入力は12列になり、ボタンを3列グリッドに移動します

とはいえ、携帯電話以下のポートレート モードでは、レイアウトを変更する必要がある場合があるため、メディア クエリを使用して css を変更し、そこから行ごとに 2 つのボタンのみを表示するようにします。

于 2012-10-15T22:56:35.013 に答える
1

最善の解決策はありません。最も簡単なのはtables を使用することです。これは最新の使用方法display: gridですが、すべてのブラウザーで機能するとは限りません。書いたものを固定要素と要素に入れ、css3 を使用して「画面に合わせる」こともできwidthますheightがtransform: scale、また、すべてのブラウザーで機能するとは限りません。4 つinline-blockのheight: 100%; width: 25%;要素内の 4 つblockの要素をheight: 25%で使用するか、16inline-blockの要素をwidth: 25%; height: 25%で使用することもできます。別の解決策として、16 要素すべてをposition: fixedorposition: absoluteでwidth:25%; height:25%定義し、topandleftをそれぞれ個別に定義することもできます。上記のすべてのソリューションについて、設定することも忘れないでくださいhtml, body { margin: 0; padding: 0; height: 100%; }。

もちろん、マージンを追加する場合はこれらのパーセンテージを調整したいかもしれませんが、それらもパーセンテージで設定して、拡大縮小したときに見栄えがするようにします。

于 2012-10-15T22:54:38.037 に答える
0

私はdivで作業することを好みますが、この種のグリッドではテーブルの方が簡単な方法かもしれませんが、確かに幅と高さの値としてパーセントを使用し、colspanとrowspanを使用してテーブルセルを正しい方法で合わせることができます

于 2012-10-15T22:54:28.097 に答える
0

ボタンを 4x4 に固定しておく場合は、レスポンシブ デザインを使用してください。

テーブルを使用せず、Div を使用します。

固定表示や絶対表示は使用しないでください。（できると思いますが、なぜですか？）

最後に、あなたが探している答え:レスポンシブ デザイン

于 2012-10-15T23:22:52.467 に答える