Question

我正在尝试为我准备的wordpress登陆页面制作响应式单页面布局。我正在使用的HTML代码是：

<section id="panel-3" class="pf-fp" data-img="001.jpg">
 <article>
  <h1>Welcome #1</h1>
  <nav> Item 1 / Item 2 / Item 3 </nav>
 </article>
 <img src="001.jpg"/>
</section>
<section id="panel-5" class="pf-fp" data-img="002.jpg">
 <article>
  <h1>Welcome #2</h1>
  <nav> Item 1 / Item 2 / Item 3 </nav>
 </article>
 <img src="002.jpg"/>
</section>
...
<section id="panel-9" class="pf-fp" data-img="003.jpg">
 <article>
  <h1>Welcome #n</h1>
  <nav> Item 1 / Item 2 / Item 3 </nav>
 </article>
 <img src="003.jpg"/>
</section>

每个部分都被定义为一个块元素，在.pf-fp上有以下css：

.pf-fp {
width:100%;
height:100%;
position:relative;
}

.pf-fp article {
 z-index:1;
 position: absolute;
 left:0; right:0; bottom:0 top:0;
 display:block;
 color: white;
}

.pf-fp img {
 z-index:0;
 position:absolute;
 left:0; right:0; bottom:0 top:0;
 display:block;
}

问题是当我试图调整屏幕大小时，由于.pf-fp的高度：100％，它变成图像+白色背景;和img的反应。如何在桌面 - 平板电脑上为每个视口设置一个部分？即使它意味着“炸掉”图像以适应视口？

Answer 1

您可以将响应式设计与您想要处理的屏幕尺寸一起使用

@media only screen and（min-width：1550px）{} @media only screen and（max-width：1449px）{}

响应一页div图像

1 个答案: