让我的 HTML 代码以最少的重写代码量响应移动设备的最佳方法是什么？

Question

抱歉，如果这是一个相当模糊的问题，我有一个网格，其中两行彼此重叠，当单击面板时，内容会扩展到两行中的任何一行下方。这在台式机和平板电脑大小的设备上运行良好，但对于移动设备，我希望面板垂直跨越，扩展内容直接在每个面板下方打开。任何关于此起点的指示都很好，我知道我可以使用媒体查询，但真的不确定如何构建我的代码以使其成为现实。

在这里 fiddle 工作：https://jsfiddle.net/simoncunningham/a3e6514r/3/

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
    <script src="index.js"></script>
  </head>
  <body>
    <div style="text-align: center">
      <h2>Expanding Grid</h2>
      <p>Click on the boxes below:</p>
    </div>

    <!-- Four columns -->
    <div class="row">
      <div class="column" onclick="openTab('b1');">
        <img src="./Icons/Banking.svg" />
        <p>Banking</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onClick="openTab('b2');">
        <img src="./Icons/Regtech.svg" />
        <p>RegTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onClick="openTab('b3');">
        <img src="./Icons/InsurTech.svg" />
        <p>InsurTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onClick="openTab('b4');">
        <img src="./Icons/Lending.svg" />
        <p>Lending</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
    </div>

    <!-- Full-width columns: (hidden by default) -->
    <div id="b1" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h3>Banking</h3>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="b2" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>RegTech</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="b3" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>InsurTech</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="b4" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Lending</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <!-- Bottom four columns -->
    <div class="row">
      <div class="column" onclick="openTab('b5');">
        <img src="./Icons/Accounting.svg" />
        <p>Accounting</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onclick="openTab('b6');">
        <img src="./Icons/Payments.svg" />
        <p>Payments</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onclick="openTab('b7');">
        <img src="./Icons/Quote.svg" />
        <p>Quote Aggregators</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onclick="openTab('b8');">
        <img src="./Icons/WealthTech.svg" />
        <p>WealthTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
    </div>

    <div id="b5" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Accounting</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="b6" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Payments</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="b7" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Quote</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="b8" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>WealthTech</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>
  </body>
</html>

    function openTab(tabName) {
      var i, x;
      x = document.getElementsByClassName('containerTab');
      for (i = 0; i < x.length; i++) {
        x[i].style.display = 'none';
      }
      document.getElementById(tabName).style.display = 'block';
    }

    // Get all the tabs into a collection
    // (don't use .getElementsByClassName()!)
    let tabs = document.querySelectorAll('.column');

    // Set up a click event handler on each of the tabs
    tabs.forEach(function (tab) {
      tab.addEventListener('click', function (event) {
        // Loop over all the tabs and remove the active class
        tabs.forEach(function (tab) {
          tab.classList.remove('active-column');
        });

        // Set the background of the clicked tab
        this.classList.add('active-column');
      });
    });

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  background-color: black;
  float: left;
  width: 25%;
  height: 226px;
  padding: 50px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  color: white;
}
.active-column {
  background-color: green;
  float: left;
  width: 25%;
  height: 226px;
  padding: 50px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  color: white;
}

.containerTab {
  padding: 20px;
  color: white;
}

/* Clear floats after the columns */
.row:after {
  content: '';
  display: table;
  clear: both;
}

/* Closable button inside the container tab */
.closebtn {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

.arrow-down {
  width: 25px;
  height: 25px;
}

Answer 1

您可以在 css 中使用 @media 使其在移动设备上响应非常好

Answer 2

如果你需要我的建议，你应该使用 bootstrap 作为你 css 的基础。当您组织页面时，它会真正帮助您。他们的文档中有很多很好的文档。您只需要在元素中添加 classes 即可。真的好用。

link: https://getbootstrap.com/docs/4.0/layout/grid/

您的页面被 12 块分隔开。你可以说，如果我的页面很大，每个元素取 space 的 3/12。如果页面大小中等，则取一半页面，如果页面较小，则取所有横向space。所以在我的 class 中，我会写 class="col-lg-3 col-md-6 col-sm-12"。如果不清楚，我很抱歉。但实际上它真的很简单。

Answer 3

您可以将此代码添加到您的 css:

@media screen and (max-width: 768px) {
  .column{
    width:100%
  }
}

让我的 HTML 代码以最少的重写代码量响应移动设备的最佳方法是什么？

What is the best approach to make my HTML code responsive for mobile with minimal amount of re-writing code?

html

javascript

css

media-queries

responsive