页面和内容无响应答案

【问题标题】：Page and content not responsive页面和内容无响应
【发布时间】：2020-06-19 19:35:50
【问题描述】：

我已经为此苦苦挣扎了好几天。它在移动设备上以及在调整浏览器大小时都没有响应。

我正在尝试在 Google 网站上将其作为框架运行，但由于缺乏响应性，在查看时会变得更糟。有什么指向我所缺少的吗？这是我到目前为止所做的。

谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<style type="text/css">
@media screen and (max-device-width:800px){ }
#chart_div {
background-image: url('https://i.ibb.co/pZYVjgQ/testbgm.png');
background-repeat: no-repeat;
background-size: 1048px;
padding-left: 80px !important;
padding-top: 85px;

}
#chart_div table {
padding: 11px !important;
}
#chart_div2 {
background-image: url('https://i.ibb.co/pZYVjgQ/testbgm.png');
background-repeat: no-repeat;
background-size: contain;
}
#chart_div2 table {
padding: 11px !important;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
   google.charts.load('current', {'packages':['gauge']});
   google.charts.setOnLoadCallback(drawChart);

   function drawChart() {

     var data = google.visualization.arrayToDataTable([
       ['Label', 'Value'],
       ['Weekly', 80],
       // ['Monthly', 80],
     ]);

     var options = {
       width: 640, height: 420,
       // redFrom: 90, redTo: 100,
       // yellowFrom:75, yellowTo: 90,
       minorTicks: 5
     };

     var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

     chart.draw(data, options);

     setInterval(function() {
       data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
       chart.draw(data, options);
     }, 13000);
   }
 </script>
</head>
<body style="height: 90vh;display: flex; justify-content:center; flex-direction: column; align-items:center; background: #AARRGGBB">
 <div id="chart_div" style="width: 1000px; height: 1000px;" class="container-fluid"></div>
    <!--<img src="https://i.ibb.co/pZYVjgQ/testbgm.png" alt="team" border="0"style="width:40%">-->
</body>
</html>

强文本

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

你有@media screen and (max-device-width:800px){ } - 这根本不会做任何事情：你在打开大括号后立即关闭它。

此外，对于媒体查询，最好使用max-width 而不是max-device-width 并且（在桌面优先样式表中）将媒体查询放在一般 CSS 规则之后。

【讨论】：

【解决方案2】：

找到了一个解决方案，创建了更多带有“if”语句的 CSS 和 JS 脚本，以调整在平板电脑、台式机或移动设备上打开的页面大小。

【讨论】：