我目前有一个名为 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 单位指定大小的对象都会保持不变相对相同。我无法弄清楚如何使控制面板在所有窗口大小的第一张图像中看起来都一样,所以任何帮助将不胜感激,谢谢!