javascript - 自适应设计，而不是本示例的自适应设计-可能

所以我想做一个响应页面。问题是为什么归结为移动性，所以数据需要放在列表中。

我将用一些示例代码来解释

所以这可能是桌面上的输出

<aside class="mainLeft">
    <ul class='tabs'>
        <li><a id="#tab1">option1</a></li>
        <li><a id="#tab2">option2</a></li>
        <li><a id="#tab3">option3</a></li>
    </ul>
</aside>

<aside class="mainRight" >
       <div id="tabl">
		    <img src="image1.png">
            <h3 >Title 1</h3>
            <p>Text 1</p>
	</div>
    <div id="tab2">
		 <img src="image2.png">
         <h3 >Title 2</h3>
         <p>Text 2</p>
    </div>
    <div id="tab3">
	     <img src="image3.png">
         <h3 >Title 3</h3>
         <p>Text 3</p>
	</div>
</aside>

所以左边是一个选项卡菜单，右边是内容，一切都很好，但是当我移动到移动设备时，我希望内容位于每个选项卡下-像这样

  <aside class="mainLeft">
         <ul class='tabs'>
             <li><a id="#tab1">option1</a>
                 <div id="tabl">
    			    <img src="image1.png">
                    <h3 >Title 1</h3>
                    <p>Text 1</p>
    		     </div>
              </li>
              <li><a id="#tab2">option2</a>
                  <div id="tab2">
    			      <img src="image2.png">
                      <h3 >Title 2</h3>
                      <p>Text 2</p>
    		      </div>
              </li>
              <li><a id="#tab3">option3</a>
                  <div id="tab3">
    			      <img src="image3.png">
                      <h3 >Title 3</h3>
                      <p>Text 3</p>
    		      </div>
              </li>
          </ul>
</aside>
<aside class="mainRight" >

</aside>

我正在尝试使用CSS或一点JS来实现此目的的方法

最好的方法是什么

我已经考虑过添加一个JS检测器，以查看它是移动设备还是台式机，但这又使其具有自适应性且无响应

我也考虑过要使用第二个代码，并尝试绝对或固定内容的位置，但这不起作用

任何建议欢迎：）

最佳答案

您可以这样做。在移动设备上时，隐藏顶部列表，并在每行上切换单个<li>。

<aside class="mainLeft">
    <ul class='tabs'>
        <li><a id="#tab1">option1</a></li>
        <li><a id="#tab2">option2</a></li>
        <li><a id="#tab3">option3</a></li>
    </ul>
</aside>

<aside class="mainRight" >
     <div id="tabl">
          <li class="mobile-li">option 1</li>
          <img src="image1.png">
          <h3 >Title 1</h3>
          <p>Text 1</p>
    </div>
    <div id="tab2">
         <li class="mobile-li">option 2</li>
         <img src="image2.png">
         <h3 >Title 2</h3>
         <p>Text 2</p>
    </div>
    <div id="tab3">
         <li class="mobile-li">option 3</li>
         <img src="image3.png">
         <h3 >Title 3</h3>
         <p>Text 3</p>
    </div>
</aside>

的CSS

.mobile-li{
   display:none; /* Hidden by default */
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)   {
    aside.mainLeft{
      display:none;
   }

   .mobile-li{
      display:block; /* Toggle on mobile */
   }

}