仅在移动设备上更改网站结构和分区位置

Change website stucuture and div position on mobile only

本文关键字：结构 网站 分区 位置 移动      更新时间：2023-09-26

我的网站 www.to-hawaii.com

当您在移动设备上看到该网站时，带有广告的左侧面板会一直移动到网站的底部。

在每个页面上，左侧面板由包含文件生成，当在移动设备上查看网站时，它会在内容下移动。该网站的结构是：

<div class="contentarea">
<div class="rightpanel"></div> / Even though it is called Right Panel this is actually the left panel
<div class="midpanel"></div> 
<div class="leftpanel"></div> / Which is actually the right panel
</div>

在不更改网站整个结构的情况下，在移动设备上进行以下更改在技术上是否可行 - 包含在页面上的指定位置，例如在照片库下而不是此面板以显示在页面底部？

基于您的结构，我认为这不行。要实现您想要的，请Copy您只想在移动设备上显示的div，然后通过 CCS3 @media rule 隐藏用于非移动设备的主div。要在gallery下方添加rightpanel的移动版本的示例

 <div class="gallery-container"></div>
 <div class="rightpanel_mobile"></div>

然后操作 css...

<style type="text/css">
@media (max-width: 768px) {
    .rightpanel { //Main
        display: none;
    }
    .rightpanel_mobile { //Mobile
        display: block;
    }
}
</style>
相关文章：