javascript - 使用固定元素和调整大小的 HTML CSS

Question

我是 html/css/javascript 初学者。

我正在做这个元素。使用 nodeJS + websockets。我的样式有问题。

我有三个固定元素。我需要它们在浏览器窗口中调整大小时正确调整大小。

我正在处理 scratchpad.io 中的样式.

这是代码我只包含样式部分。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

</script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Corben:bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple" rel="stylesheet" type="text/css">
<style>
body {
  padding-top: 5px;
  text-align: center;
  background: url(http://subtlepatterns.com/patterns/subtle_white_feathers.png);
  border: 2px dotted black;
}

* {
  font-family: 'Nobil', Georgia, Times, serif;
  color:black;
}
#main {
  margin:10% 10% 10% 30%;
  padding:7% 2% 2% 2%;
  background: rgba(160,160,160,0.2);
  border-radius:12.5px;
  border:1px dotted rgb(200,200,200); 
}

#header {
  position:fixed;
  top:0;
  left:0;
  margin:0 20 0 20;
  padding:0 100 15 5;
  width:100%;
  height:2.5%;
  font-family:'A', Georgia, Times, serif;
}

#title  {
  font-family: 'Nobil', Georgia, Times, serif;
  margin-top:0;
  padding-left:0;
  padding-top:20;
  font-size:300%;
  background: url(http://subtlepatterns.com/patterns/subtle_white_feathers.png);
  text-shadow: 7px 7px 1px #ccc;
  font-family: 'Rancho', cursive;
}

#sidebar {
  position:fixed;
  top:15%;
  left:0;
  box-shadow: 0 0 1em 0.5em #ccc;
  margin:20 50;
  background: url(http://subtlepatterns.com/patterns/subtle_white_feathers.png);  
  border-radius:12.5px;
  width:
  }
#sidebar div {
  padding:10 15 20 15;
  width:auto;
  height:auto;
  border-radius:12.5px;
  -webkit-box-shadow: inset 0px 0px 100px 20px rgba(117,104,104,0.5);
  -moz-box-shadow: inset 0px 0px 100px 20px rgba(117,104,104,0.5);
  box-shadow: inset 0px 0px 100px 20px rgba(117,104,104,0.5);
}
#upbutton {
  position:fixed;
  top:91%;
  left:94%;
  padding:10 15 20 15;
  width:7;
  height:14px;
  box-shadow: 0 0 1em 0.5em #ccc;
  border-radius:12.5px;
  background-color:grey;
  border:1px solid black;
}

#upbutton img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  width: 100%;
  height: 100%;
}

#upimage {
  width:5px;
  height:5px;
}
 th {
    border-bottom:1px solid rgba(160,160,160,0.5);
    font-size:175%;
}

#sidebar td {
  text-align:left;

}

#sidebar thead {
  border-bottom: thick dotted #ff0000;
}

#sidebar tfoot {
  font-size:75%;
}

#messages {
  margin-top:-50px;
  width:100%;
  border:1px solid rgba(160,160,160,0.5);
}

#messages td {
  padding:10 5 5 30;
  border-bottom:1px dotted rgba(160,160,160,0.5);
}

thead {
  text-shadow: 7px 7px 1px #ccc;
}

.name {
  width:1%;
  font-weight: bold;
  border-right: 1px dotted rgba(160,160,160,0.5);
}
</style>
<div>  
<a name="top"></a>
HIIIIIIIII
</div>
<div id="header" >
<h1 id="title" >
Enter Your Message Below
<hr>
</h1>  
</div>

<div id="sidebar">
<div>
<table>
  <thead>
    <tr>
      <th>Users</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>__________________</td>
    </tr>
  </tfoot>
  <tbody>

    <tr>
      <td>Abc</td>
    </tr>
    <tr>
      <td>Keshav</td>
    </tr>
    <tr>
      <td>Rachna</td>
    </tr>
  </tbody>
</table> 
</div>
</div>
<a href="#top"><div id="upbutton"><img src="http://cdn.flaticon.com/png/256/26045.png"></div></a>
<div id="main" >
<table id="messages">
  <thead>
    <tr>
      <th colspan='2' >Messages</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td  colspan='2' >
        <hr>
          <form action="send();">
            <input type="text" name="message" value="Enter a Message">
            <input type="submit" value="Submit">
          </form>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td class="name">Abc</td>
      <td>Hi</td>
    </tr>
    <tr>
      <td class="name">Keshav</td>
      <td>Holla</td>
    <tr>
      <td class="name">Rachna</td>
      <td>Hello</td>
    </tr>
    </tr>
  </tbody>
</table>
</div>

Answer 1

为了制作响应式网页设计，最好使用@media。当使用 min-width 或 max-width 时，它仅在@media(视口(viewport))处于特定大小时才应用属性

如果您的目标是某个设备，请查看特定设备的尺寸，但下面提到的是常见设备。

@media (min-width: 768px) Portrait devices and smaller devices
@media (min-width: 992px) Notebooks and landscape tablets / smartphones
@media (min-width: 1200px) Large displays

因此，对于一个工作示例，您的元素可以从水平矩形变为正方形再到垂直矩形，如下所示:http://jsfiddle.net/czf792r1/2/

注意:水平调整结果浏览器的大小以观察它的变化