1

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

CodePen 页面

我想知道我怎样才能让它在移动设备上看起来不错。我尝试添加媒体查询，最终弄乱了整个视差。

任何帮助都感激不尽！

谢谢。

4

1 回答 1

3

首先，您需要将以下内容添加到 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;    
  }
}

代码笔在这里

于 2013-06-24T19:09:41.113 回答