Question

非常直接。

当我放大我的页面时，div和这些不会扩展以适应文档，但在原始网站上我模仿它。他们的代码有何不同？他们用什么代码来做这个伎俩。

只需按住CTRL并放大。

有人能帮助我吗？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
</script>

</head>
<body>
  <div id = "container" />
      <div class = "banner" />

            <h4>Gundi!</h4>
          <div id = "divider-p">
              <div class = "seperators"><span></span></div>
              <div id = "networks">
                  <!-- <div id = "facebook"><img src = "images/fb.svg" width = "24"></div>
                  <div id = "twitter"><img src = "images/twitter.svg" width = "24"></div>
                  <div id = "tumblr"><img src = "images/tumblr.svg" width = "24"></div> -->
              </div>
          </div>
    </div>

    <div id = "navigation">
          <ul>
              <li>
                  <a>
                      Home
                  </a>
              </li>
              <li>
                  <a>
                      Ranking
                  </a>
              </li>
              <li>
                  <a>
                      Support
                  </a>
              </li>
              <li>
                  <a>
                      Media
                  </a>
              </li>
              <li>
                  <a>
                      Store
                  </a>
              </li>
              <li>
                  <a>
                      Forum
                  </a>
              </li>
          </ul>
    </div>

    <div id = "players-online">
          <div class = "amount">
              <span>0 people are playing | server online</span>
          </div>
    </div>
</div>

<div class = "row">
    <div class = "col-8 content">
        <section id = "register">
          <div class = "game">
              <button id = "game-start" class = "col-2">Game Start</button>
              <!-- <br><button id = "download" class = "blue">Download</button>
              <button id = "register" class = "blue">Register</button> -->
          </div>
        </section>

    </div>
</div>




</body>
</html>

完整代码：https://jsfiddle.net/yayyjL14/

Answer 1

我发现您的网站存在两个问题：

其中一个，导航栏没有响应，因为您没有将其放入响应式容器中，因为宽度没有流体测量值（即：百分比）。我建议学习一个CSS / Javascript框架Bootstrap。只有网格系统（基于CSS构建），可以节省大量时间来构建响应式容器，允许您根据浏览器的大小动态调整内容大小。您可以从http://getbootstrap.com/下载Bootstrap并从以下网址了解网格：http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

我看到的另一个问题是按钮没有分配宽度，因此容易改变宽度。我会将宽度设置为px，只是因为它没有调整大小，并且保持一定的宽度，因为移动设备上没有任何点可以让按钮太小（通常在桌面和移动设备上保持相同的大小），虽然您可以通过媒体查询改变这一点。）

如何制作这样的响应式页面？

1 个答案: