所以我正在尝试制作响应式页面。问题是为什么它归结为移动数据需要位于列表中。
我会用一些示例代码来解释
所以这可能是桌面上的输出
<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>
每行 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 */
}
}
关于javascript - 响应式设计而不是此示例的自适应设计 - 可能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31155698/