Question

我爱上了这个超级简单的模板：

我想知道如何在移动设备上使这看起来很好看。我尝试添加媒体查询，最终弄乱了整个视差事件。

非常感谢任何帮助！

感谢。

Answer 1

首先，您需要在codepen中将以下内容添加到HTML的设置中（通常将其添加到<head>内。

<meta name='viewport' content='width=device-width'>

现在您已准备好做出响应，您需要弄清楚如何在最小的视口（首先是移动设备）上查看它。

在这种情况下，我将宽度更新为80％而不是固定的em值，但是通过添加margin-left的负宽度的一半来应用相同的逻辑。

#bannertext { 
  width: 80%; 
  position: fixed; 
  top: 20%;   
  left: 50%;
  border: .5em solid #fff; 
  margin-left: -40%; 
  padding: 2em 0; }

现在你已经在小屏幕上工作了，你只需设置断点，包括其他百分比值或固定值。这只是一个额外的断点，但你应该看看如何根据你的需要扩展它。

@media screen and (min-width:30em){

  #bannertext { 
  max-width: 24em;
  margin-left: -12em;    
  }
}