jquery - 使用 CSS 或 Jquery 将两个 block 定位在桌面的绝对位置和移动设备的相对位置

Question

我正在尝试执行以下任务，如图所示。我尝试使用 css 编码但失败了。使用 CSS 是否可行，如果不行，如何使用 jquery 实现此任务。

桌面版: 我正在尝试 block 1 和 block 2 相对于容器处于绝对位置，而 block 2 相对于 block 1 的位置具有自动高度。 block 3 相对于容器的位置。

移动设备 在移动 View 中，我只希望 block 1 位于容器的绝对底部位置， block 2 和 block 3 相对于容器的位置，如图所示。

<style>
.container{
    width:100%;
    min-height:768px;
    height:auto;
    margin:0;
    padding:0;
    top:0;
    left:0;
    position:absolute;
    display:block;
    background:#666;
}
.b-50{
    width:50%;
}
.pinned1{
    background:#888;
    float:right;
    display:block;
    padding:20px;
    height:auto;
    color:#FFF;
}
.pinned2{
    background:#888;
    position:relative;
    display:block;
    float:right;
    color:#FFF;
    padding:20px;
    height:auto;
}
.block3{
    display:block;
    height:auto;
    position:relative;
    margin-top:auto;
    top:100%;
}
@media all and (max-width: 767px){
.b-50{
    width:100%;
}
.pinned2{
    position:absolute;
    top:100%;
}

}
</style>
<div class="container">
          <div class="b-50 pinned1">
              <h1>Block 1</h1>
          </div>    
          <div class="b-50 pinned2">
              <h2>Block 2</h2>
          </div>
</div>
<div class="block3">
    <h3>Block 3</h3>
</div>

Demo JSFIDDLDE

Answer 1

取决于您想要如何定义移动/桌面浏览器。实际上有两种不同的方法:

1. 有反应。通过浏览器的尺寸来检查差异。为此，您可以在 CSS 中使用媒体查询。优点:如果有人使用非常小的桌面浏览器，那么它也会产生相同的效果。当您更改元素的位置时，这通常是您想要的

2. 功能。如果您的位置更改是由于功能(例如触摸/滑动而不是单击)而完成的，那么您应该使用 JS 检查浏览器版本。例如 jQuery 就提供了相应的代码。

我认为您需要的是版本 1。