文章/答案/技术大牛

发布

社区首页 >问答首页 >用最少的重写代码使我的HTML代码响应移动的最佳方法是什么？

问用最少的重写代码使我的HTML代码响应移动的最佳方法是什么？
EN

Stack Overflow用户

提问于 2021-03-04 23:42:10

回答 3查看 76关注 0票数 1

对不起，如果这是一个相当模糊的问题，当单击面板时，我有一个两行并排的网格，其中两行的内容在这两行中的任一行下面展开。这在桌面和平板电脑大小的设备上工作得很好，但对于移动设备，我希望面板垂直延伸，在每个面板下面直接打开不断扩展的内容。在这个起点上的任何指针都是很棒的，我知道我可以使用媒体查询，但是我真的不知道如何构造我的代码以使它成为现实。

这里的工作小提琴：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;
}

html

css

media-queries

responsive

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-03-05 00:29:22

您可以将此代码添加到css中：

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

票数 2

Stack Overflow用户

发布于 2021-03-04 23:48:43

您可以使用css中的@媒体来使其在移动设备上得到很好的响应。

票数 2

Stack Overflow用户

发布于 2021-03-04 23:51:39

如果您需要我的建议，您应该使用引导作为您的css的基础。当你组织你的网页时，它真的会对你有帮助。他们有很多很好的文档。您只需要在元素中添加类。它真的很容易使用。

链接：https://getbootstrap.com/docs/4.0/layout/grid/

你的页面被12块分开。您可以说，如果我的页面很大，为每个元素占用3/12的空间。如果页面是中等大小，则取页的一半，如果是小的，则占用所有的水平空间。所以在我的课上，我会写class="col-lg-3 col-md-6 col-sm-12"。如果不清楚的话我很抱歉。但说真的这真的很简单。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66484666

复制

相似问题

问用最少的重写代码使我的HTML代码响应移动的最佳方法是什么？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用最少的重写代码使我的HTML代码响应移动的最佳方法是什么？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用最少的重写代码使我的HTML代码响应移动的最佳方法是什么？
EN