0

現在、controPanelChamber という名前の div があり、その中に他のいくつかの div がネストされており、次のようになります (フルスクリーンの場合):ここに画像の説明を入力これは素晴らしいことです。コードは次のとおりです。

div#controlPanelChamber
    h2(id="control_panel_header") Control Panel
    div#label_control_panel
        label(id="panel_label") Max Retry (1 - 5)
        label(id="panel_label") Scan Frequency Seconds (1 - 30)
        label(id="panel_label") Max Sleep Time (0 - 10)
        label(id="panel_label") Max RSSI Change ( 1 - 100)
        label(id="panel_label") Max RSSI History Length (1 - 20)
        label(id="panel_label") RSSI Coefficient (0 - 2)
        label(id="panel_label") Scans Per Report (1 - 20)
    div#text_control_panel
        input.maxRetryInput(id="textfield", type='text', value='#{max_retry}')
        input.scanFrequencyInput(id="textfield", type='text', value='#{scan_freq}')
        input.maxSleepInput(id="textfield", type='text', value='#{max_sleep}')
        input.maxRSSIChangeInput(id="textfield", type='text', value='#{max_rssiC}')
        input.maxRSSIHistoryInput(id="textfield", type='text', value='#{max_rssiH}')
        input.RSSICoefficientInput(id="textfield", type='text', value='#{rssi}')
        input.scansPerReportInput(id="textfield", type='text', value='#{scan_per}')
    div#slider_control_panel
        input.maxRetry(id="sliders", type='range', min='1', max='5', steps='1')
        input.scanFrequency(id="sliders", type='range', min='1', max='30', step='1')
        input.maxSleep(id="sliders", type='range', min='0', max='10', step='1')
        input.maxRSSIChange(id="sliders", type='range', min='1', max='100', step='1')
        input.maxRSSIHistory(id="sliders", type='range', min='1', max='20', step='1')
        input.RSSICoefficient(id="sliders", type='range', min='0', max='2', step='0.001')
        input.scansPerReport(id="sliders", type='range', min='1', max='20', step='1')

これはまさに私が望んでいる方法です。ただし、ウィンドウのサイズを変更すると、すべてがそれに応じて拡大縮小されるわけではなく、ウィンドウが十分に小さい場合、次のようになりますここに画像の説明を入力。私が持っている CSS は次のようになります。

body {
  font: 13px "Lucida Grande", Helvetica, Arial, sans-serif;
  background-color: #E6E6E6;
  width: 100%;
}

#control_panel_header {
  color: white;
  font-size: 250%;
  width: 100%
  background-color pink;
  border-color: white;
  text-align: center;
}

#controlPanelChamber {
  border-radius: 5vw;
  width: 40vw;
  height: 25vw;
  margin-left: 29vw;
  background-color: #57C441;
  float: left;
}


#label_control_panel {
  width: 18vw;
  height: 15vw;
  margin-left: 2vw;
  margin-bottom: 2vw;
  background-color: #57C441;
  float: left;
}

#text_control_panel {
  width: 3.8vw;
  height: 15vw;
  margin-left: 2vw;
  background-color: #57C441;
  float: left;
}

#slider_control_panel {
  width: 8vw;
  height: 15vw;
  margin-left: 2vw;
  margin-bottom: 2vw;
  background-color: #57C441;
  float: left;
}

#panel_label {
  width: 16vw;
  font-size: 1vw;
  color: white;
  margin-bottom: 1vw;
  margin-top: 0.1vw;
  margin-left: 1vw;
  float: left;
}

#textfield {
  font-size: 1vw;
  width: 2.9vw;
  height: 1.25vw;
  margin-bottom: 0.6vw;
  margin-left: 0.2vw;
}

#sliders {
  margin-bottom: 1.1vw;
  margin-left: 0.3vw;
  width: 7.5vw;
  float: left;
}

私はフロントエンド開発にはかなり慣れていませんが、ウィンドウのサイズに関係なく、VW 単位で指定されたサイズのオブジェクトが維持されるように、サイズがウィンドウに対して相対的に維持されるようにするために VW が使用されていることを理解しています。比較的同じ。すべてのウィンドウ サイズでコントロール パネルを最初の画像のように表示する方法を理解するのに苦労しています。

4

1 に答える 1

0

ビュー幅のvw略で、ウィンドウスタイルの変更時にサイズを変更するのに役立ちますが、高さではなくウィンドウの幅に応じてのみ調整されます。div

vhCSS の一部でor view-heightを使用して幅だけでなく高さに対応させることをお勧めしますが、よりクリーンで効率的な方法は、 を使用して画面サイズに応じて s の@media css controllerサイズを変更することですdivページは現在表示されています。

この方法は面倒で時間がかかるように見えるかもしれませんが、将来的にはより細かく制御できるようになります。詳細はこちらでご覧いただけます。

レスポンシブ サイトの作成の詳細については、html/css と javascript を使用してレスポンシブ Web サイトを作成する方法を参照してください。

于 2016-06-21T14:50:38.257 に答える