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根据窗口样式的变化调整 s 大小，但它只根据窗口的宽度而不是高度进行调整。

我的建议是在您的某些 CSS 中也使用vh或view-height以使其响应高度和宽度，尽管更清洁和更有效的方法是使用s 根据屏幕大小@media css controller更改大小div当前正在查看该页面。

这种方法可能看起来很痛苦且耗时，但将来会给您更大的控制权。更多可以在这里看到。

有关制作响应式网站的更多详细信息，请参阅如何使用 html/css 和 javascript 制作响应式网站。

于 2016-06-21T14:50:38.257 回答