javascript - 响应式设计而不是此示例的自适应设计 - 可能

Question

所以我正在尝试制作响应式页面。问题是为什么它归结为移动数据需要位于列表中。

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

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

<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 检测器来查看它是移动设备还是桌面设备，但这又使它具有自适应性和非响应性

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

欢迎任何建议:)

Answer 1

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

<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 */
   }

}