响应式项目在 Flask 本地 Web 服务器中不起作用

问题描述 投票：0回答：1

我正在开发一个 Flask web 应用程序，其中包含一些响应式项目。

例如，导航栏在小屏幕中隐藏，并替换为打开侧栏的图标，第二部分 () 的元素是 w3-half 类，当屏幕小于 601 px 时，它使用 100% 宽度.

当我在浏览器中打开 html 页面时，上述所有元素都可以正常工作，但是，当我使用 Flask 提供的本地 Web 服务器时，它们不起作用。

<!DOCTYPE html>
<html>
<head>
   <title>SkinAnalysis</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

   <!-- Necessari pel funcionament del missatge d'alerta -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

   <link rel="shortcut icon" href="{{url_for('static',filename ='logodef.png')}}">


   <style>
    .mySlides {display:none}
    .w3-left, .w3-right, .w3-badge {cursor:pointer}
    .w3-badge {height:13px;width:13px;padding:0}
    
    .alert {text-align: center; font-family: "Raleway", sans-serif; font-size: calc(14px + (21 - 14) * ((100vw - 300px) / (1600 - 300)));}

    body {font-family: "Raleway", sans-serif;}
    
    span {font-family: "Raleway", sans-serif; font-size: calc(20px + (28 - 20) * ((100vw - 300px) / (1600 - 300)));}

    .cos {font-family: "Raleway", sans-serif; font-size: calc(14px + (21 - 14) * ((100vw - 300px) / (1600 - 300)));}
    .barranav {font-family: "Raleway", sans-serif; font-size: calc(14px + (19 - 14) * ((100vw - 300px) / (1600 - 300)));}
    .titol {font-family: "Raleway", sans-serif; font-size: calc(16px + (23 - 16) * ((100vw - 300px) / (1600 - 300)));}
    .respicon {font-size: calc(16px + (23 - 16) * ((100vw - 300px) / (1600 - 300)));}

    body, html {
  	  height: 100%;
  	  line-height: 1.5;}

 </style>
</head>


<body>

  <!-- Navbar (sit on top) -->
  <div class="w3-top">
    <div class="w3-bar w3-white w3-card">
      <a href="#home" class="w3-bar-item w3-button"><img src="{{url_for('static',filename = 'cap_def.png')}}" style="width: 180px"></a>
      <!-- Float links to the right. Hide them on small screens -->
      <div class="w3-right w3-hide-small">
        <a href="#projecte" class="w3-bar-item w3-button"><i class="fa fa-briefcase respicon"></i><b class="barranav"> Projecte</b></a>
        <a href="#indicacions" class="w3-bar-item w3-button"><i class="fa fa-list-ul respicon"></i><b class="barranav"> Indicacions</b></a>	
        <a href="#analitza" class="w3-bar-item w3-button"><i class="fa fa-search respicon"></i><b class="barranav"> Analitza't</b></a>
      </div>

      <!-- Hide right-floated links on small screens and replace them with a menu icon -->
      <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
        <i class="fa fa-bars"></i>
      </a>
    
    </div>
  </div>

  <!-- Sidebar on small screens when clicking the menu icon -->
  <nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
  	<a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16"><i class="fa fa-times"></i></a>
  	<a href="#projecte" onclick="w3_close()" class="w3-bar-item w3-button"><i class="fa fa-briefcase"></i>  Projecte</a>
  	<a href="#indicacions" onclick="w3_close()" class="w3-bar-item w3-button"><i class="fa fa-list-ul"></i>  Indicacions</a>
  	<a href="#analitza" onclick="w3_close()" class="w3-bar-item w3-button"><i class="fa fa-search"></i>  Analitza</a>
  </nav>

  
  <!-- Flash messages -->
  <div class='w3-container w3-padding'>
      {% with messages = get_flashed_messages() %}
        {% if messages %}
          {% for message in messages %}
            <div class="alert alert-danger alert-dismissible" role="alert" text-align="center">
            <button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="True">&times;</span></button>
              <strong>{{ message }}</strong> Torna a l'apartat Analitza't
            </div>
          
          {% endfor %}
        {% endif %}
      {% endwith %}
    {% block body %}
    {% endblock %}
  </div>

  <!-- Page content -->
  <div class="w3-content w3-padding" style="max-width:1564px">

   <!-- Projecte -->
   <div class="w3-container w3-padding-16" id="projecte">
	<div class="w3-center w3-padding-32">
		<span class="w3-bottombar w3-border-dark-grey w3-padding-8">Què és SkinAnalysis?</span>
	</div>

    	<div class="w3-row-padding w3-center" style="margin-top:16px">
        <div class="w3-half" style="padding-right: 15px;">
          <p class="titol"><b>1. Preparació previa</b></p>
          <i class="fa fa-cogs w3-margin-bottom w3-jumbo w3-center"></i>
          <p class="cos" style="text-align: justify;">
            Per tal de poder oferir referents a les dimensions de la lesió, ens has de proporcionar una referència.<br>
          </p>
          <img src="{{url_for('static',filename = 'nomes_linia.png')}}" style="width: 50%">
        </div>
        <div class="w3-half" style="padding-left: 15px;">
          <p class="titol"><b>2. Captura la imatge</b></p>
          <i class="fa fa-camera-retro w3-margin-bottom w3-jumbo w3-center"></i>
          <p class="cos" style="text-align: justify;">
            Un cop preparats per fer la fotografia, assegura't realitzar-la sota unes condicions d'il·luminació que evitin la presència de contrastos indesitjats, com poden ser zones ombrejades per falta de llum.<br>
            Per altra banda, la imatge hauria de mostrar la lesió amb una dimensió adequada i part de la pell del seu contorn.</p>
          <img src="{{url_for('static',filename = 'ex_lesio.jpg')}}" style="width: 50%">

        </div>
      </div>

  <!-- End page content -->
  </div>

<script>

//Toggle between showing and hiding the sidebar when clicking the menu icon 
var mySidebar = document.getElementById("mySidebar");

function w3_open() {
  if (mySidebar.style.display === 'block') {
    mySidebar.style.display = 'none';
  } else {
    mySidebar.style.display = 'block';
  }
}

//Close the sidebar with the close button 
function w3_close() {
    mySidebar.style.display = "none";
}
  </script>



</body>

</html>

在这里，我发布了 index.html 的简化版本，其中包含未按预期工作的部分。该模板使用 render_template() 在 Flask 中运行。

提前对您可以检测到的所有错误表示歉意，但我不是网络程序员，这是一个项目......

如果需要更多代码部分来检测问题，我将包含它们！

编辑

我在这里添加两张图片来说明问题。第一个 html 页面在浏览器中可视化，第二个页面在本地 Web 服务器中可视化。

html css flask responsive localserver
1个回答
0
投票
<html>
  <head>
    <meta name=“viewport” content=“width=device-width, initial-scale=1">
  </head>
  <body>
  </body>
</html>

在页面的 

meta
中添加 
head
标签。就像前面的例子一样。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.