Question

我正在尝试正确创建以下模型的HTML结构：

要求和条件：

项目的大小（粉红色或黑色项目）是设备屏幕的大小。
每个项目代表一个页面。
它可以是台式机，平板电脑，智能手机等任何设备。
时间只会显示一页！
导航，不是我的问题的主题，我只想提供尽可能多的信息，点击桌面设备上的箭头并在其他设备上滑动即可完成。
没有滚动条。
任何页面的内容都可能超过屏幕的当前大小，如果是这样，它将在内容中标记滑块或轮播功能。
任何页面都可以包含其他类似的结构，例如当前页面。

我不确定在创建当前模型的基本结构时是否所有要点都非常重要。

使用position: relative和所有其他元素position: absolute创建主要启动元素（粉红色）是否可以？还有基于当前屏幕大小用jQuery计算的页面大小？或者这不需要任何jQuery？（width: 100%和height: 100%仅限CSS？）

这就是我想这个HTML结构的方式，但我不太确定它是最好的解决方案，所以我认为听取其他意见也是个好主意。

Answer 1

你的方法非常接近所需要的，所有的页面div应该在一个需要相对的容器内，而childs应该是绝对的，据我所知，一个简单的标记就足以实现这一点在CSS中使用视口高度和宽度，如下所示

<强> HTML

<div id="cont">
    <div id="pink"></div>
    <div id="blk1"></div>
    <div id="blk2"></div>
    <div id="blk3"></div>
    <div id="blk4"></div>
</div>

<强> CSS

#cont{
  width: 100vw;
  height:100vh;
  position: relative;
}

#cont div{
  width: 100vw;
  height:100vh;
  background: #2c2c2c;
  margin:20px;
  position:absolute;
}

#pink{ background: #F00 !important; }
#blk1{ left: -100vw; }
#blk2{ top: -100vh; }
#blk3{ bottom: -100vh; }
#blk4{ right: -100vw; }

这是一个fiddle

屏幕大小元素的

1 个答案: