使我的 html 网站兼容

Question

以下代码将显示我想要兼容的 html 文件

{% load staticfiles %}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <title>*****</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
  <link href="{% static 'bootstrap/css/dashboard.css' %}"  rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
   <link href="{% static 'style_sample.css' %}"  rel="stylesheet">
   <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
   <script src="{% static 'script_sample.js' %}"></script>
  </head>

  <body>
{% block content %}
<div id="header>">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand" ><img src="{% static "bootstrap/css/logo4.png" %}" alt="" style="margin-top:-5%;"/></a>
    </div>

    <div>
      <ul class="nav navbar-nav navbar-right">
<li></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span>
 {{ user.first_name }}</a></li>

        <li><a href="{% url 'django.contrib.auth.views.logout' %}"><span class="glyphicon glyphicon-log-out\" ></span>Logout</a></li>

      </ul>

    </div>
 </div>
</nav>
</div>


<div class="menu_sample top_mar">
              <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
        <li><span style="color:blue; font-weight:bold;">Dashboards</span></li>
         {% for Dashboard in dashboards %}
<li><a href="{{ Dashboard.d_url }}">{{ Dashboard.d_name }}</a></li>
           {% endfor %}
          </ul>

        </div>

    </div>
    <div class="content pushed top_mar">
      <button onclick="toggleMenu()"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button>
</div>

<div style="margin-left:-1%; margin-top:3.5%; height: 625px;" class="col-sm-9" >
<iframe width="100%"  height="95%" name="iframe_a" frameborder="0"></iframe>
</div>


{% endblock %}
  </body>

</html>

使用bootstrap和css，css我使用的是如下

/* Styles go here */

.menu_sample {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  border: solid 1px;
  transition: transform 0.1s ease-out;
}

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 10px;
  transition: left 1s ease-out;
  margin-left: -2%;
  margin-top: 150%;
}

/*transition*/
.top_mar {
    margin-top: 25%;
}

/* on toggle*/
.content.pushed {
  left: 225px;
}

.hide {
  transform:translateX( -100px);
}

当我减小或增大浏览器的大小时，我会看到奇怪的东西。需要帮助使其兼容所有尺寸..

Answer 1

要使站点兼容，您可以使用 media queries - this introduction 非常好

查看这些链接以获取更多参考： Link1 Link2

或者您可以尝试 % 而不是宽度等 px

Answer 2

您使用 Bootstrap，但声明 HTML 4.01 文档类型...您应该使用 HTML5 文档类型 <!doctype html>。由于您使用 Bootstrap，最好的例子是查看 getbootstrap.com 的源代码，您会看到他们正在使用 HTML5 文档类型。 HTML5 文档类型将提供最佳兼容性，因为大多数现代智能 phones/tablets 都关注它。

Bootstrap 为您处理媒体查询，除非您进行自定义编码。

http://getbootstrap.com/getting-started/#examples 提供各种布局示例。找到最接近您想要的，并将其用作基础。然后建立它并定制它。在担心颜色和其他与样式相关的问题之前，按照您想要的方式布置所有内容。

使用 Bootstrap 列会给你想要的东西。

<div class="container">
    <div class="row">
        <div class="col-md-6">left side</div>
        <div class="col-md-6">right side</div>
    </div>
</div>

1 行有 12 个列。 12 等同于 parent 的 100%。所以 6 是 parent（即 "row"）的 50%。您必须将 cols 放在一行或其他列中。在我刚刚给出的示例中，在较小的设备上，右侧会很好地下降到左侧下方。您可以通过调整浏览器大小来复制它 window.

您需要的一切都已在 Bootstrap 中。我建议学习它，学习专栏，并使用 Bootstrap 提供的工具将您的网站整合在一起，而不是尝试破解您自己的网站。您已加载 Bootstrap，请使用它！

您可以使用 Bootstrap 提供的一切创建一个完整的网站。然后你的风格 sheet 只需让它们看起来像你想要的颜色、字体大小等。你的风格 sheet 基本上是一种配色方案来覆盖内置的 Bootstrap 主题。

Bootstrap 处理 header、导航栏、侧边栏、页脚、主要内容区域，如果您使用随附的类，一切都适合您。然后，如果您需要 header 更厚或更薄，不同的背景颜色，您可以用您的样式覆盖它 sheet。

最后：看了你的问题，你还真是不明白是怎么回事。我建议您花更多时间重新措辞您的问题。您的页面看起来像一个导航栏，带有一个按钮和一个 iframe。如果您谈论的是 iframe 中的内容看起来一团糟，那么这是另一个问题，因为它是另一个具有自己的源代码的站点，如果它不是'反应灵敏。如果您不拥有 iframe 中的页面，那么您将无能为力。

使我的 html 网站兼容

making my html site compatible

html

css

cross-browser