如何使用 javascript 使该网站具有响应性？答案

【问题标题】：How to make this website responsive using javascript?如何使用 javascript 使该网站具有响应性？
【发布时间】：2021-07-12 07:08:05
【问题描述】：

我想知道如何使这个 HTML 网站具有响应性。它包含许多 iframe 分组到一个表中。

首先是主页。

<!DOCTYPE html>
<html>
<head>
</head>
<body style="width:200%;">
  <table>
    <tr>
      <td rowspan="2"><iframe name="mainframe" src="youtube cover art.jpg" width="1345" height="720"></iframe></td>
      <th style="width:10px;"> </th>
      <th style="width:446px;height:215px;font-size:40px;">Apps</th>
      <th style="width:446px;height:215px;font-size:40px;">An overview for the day</th>
      <th style="width:446px;height:215px;font-size:40px;">Settings</th>
    </tr>
    <tr>
      <th style="width:10px;"> </th>
      <td><iframe src="apps 1.html" width="446" height="500"></iframe></td>
      <td><iframe src="http://feeds.bbci.co.uk/news/world/asia/rss.xml" width="446" height="500"></iframe></td>
      <td><iframe src="settings 1.html" width="446" height="500"></iframe></td>
    </tr>
  </table>
</body>
</html>

以apps 1.html为src的iframe

<!DOCTYPE html>
<html>
<head>
</head>
<body style="width:425px;">
<a href="about:blank" target="mainframe">blank</a>
<a href="youtube cover art.jpg" target="mainframe">wallpaper</a>
<a href="https://www.youtube.com/" target="mainframe"><img src="youtube.jpg"></a>
<a href="http://feeds.bbci.co.uk/news/world/asia/rss.xml" target="mainframe"><img src="BBC News.jpg"></a>
</body>
</html>

以及将 iframe 设置为 1.html 作为 src

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
  var password = "Hudson1377";
  var x = prompt("Enter in the password "," ");
  if (x!== password) {
   alert("Please try again.");
   window.location.reload();
  }
</script>
</head>
<body style="width:445px;">
<a href="javascript:window.location.href=window.location.href">log out</a>
</body>
</html>

【问题讨论】：

标签： javascript html iframe html-table responsive

【解决方案1】：

您必须使用 css 媒体查询以使其具有响应性。但是您可以在宽度值中使用百分比。示例：宽度=100%

【讨论】：

【解决方案2】：

您可以使用 CSS 媒体查询确保使用 min-width 和 max-width 属性，并且断点应遵循此网格标准。 xs: 0, sm：480像素， MD：768像素， lg：1024像素

【讨论】：

这就是我必须做的@media screen and (min-width: 480px) { #mainframe {width: 446px;} }我说的对吗？
如果你只使用 min 或 max-width 而不是只使用宽度会很好。

【解决方案3】：

自行车改造？使用 Bootstrap 和其他可用的库或框架

【讨论】：

你能解释一下如何使用引导程序@Mostafa .m 吗？