html - 调整窗口大小时如何制作缩放文本字段和 slider (HTML/JADE/CSS)

Question

我目前有一个名为 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 是为了确保大小保持相对于窗口，这样无论窗口的尺寸如何，对象的大小都在大众单位保持相对不变。我无法弄清楚如何使控制面板在所有窗口尺寸下都像第一张图片中那样显示，因此我们将不胜感激，谢谢!

Answer 1

所以 vw 代表 view-width，虽然它有助于使您的 div 根据窗口样式的变化调整大小，但它仅根据取决于 window 的宽度而不是高度。

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

此方法可能看起来很痛苦且耗时，但将来会给您更大的控制权。更多可见here .

有关制作响应式网站的更多详细信息，请参阅 how to make a responsive website using html/css and javascript .