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>。

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

}

响应式设计而非适用于此示例 - 可能

1 个答案: