为不同的移动屏幕分辨率渲染带有文本的横幅图像答案

【问题标题】：Rendring banner image with text for different mobile screen resolution为不同的移动屏幕分辨率渲染带有文本的横幅图像
【发布时间】：2015-04-15 18:54:43
【问题描述】：

您好，我正在开发一个网页，我发现在为不同的移动宽度设计带有文本的横幅时遇到了困难。因此，在移动设备中，我只想在所有移动设备宽度中显示垂直居中的标题，剩余的段落、内容和按钮应该下降。由于移动设备将具有不同的宽度，具体取决于对齐方式是否变差。任何人都可以帮助我在移动设备中呈现这个页面的最糟糕的方法是什么，只有标题在顶部，垂直对齐的中间和剩余的段落和按钮应该下来。我正在使用边距，所以请帮助我找到除边距之外的最佳方式。

jsbin 链接：http://jsbin.com/butore/1/edit?html,css,output

【问题讨论】：

您可以使用media queries 来微调特定尺寸范围的样式，仅适用于移动设备。这是我认为最好的方法

标签： html css ruby-on-rails twitter-bootstrap mobile

【解决方案1】：

好的，如果我正确理解您的需求，我建议您使用媒体查询 - 您不需要为每个单独的移动宽度进行设计；那将是可怕的。但是要找到内容中断的断点，并应用媒体查询来减少该元素的边距等。

或者，您可以添加 desktop-only 和 mobile-only，这将根据您选择的设备宽度而变化。因此，在您的场景中，您的 mobile-only 类将在横幅下方包含您的段落和按钮。

例如：

.desktop-only {
        display:block;
}
.mobile-only {
        display:none;
}
@media screen and (max-width: 45em) {
        .desktop-only {
               display:none;
        }
        .mobile-only {
               display:block; 
        }
}

【讨论】：

【解决方案2】：

如果您只关心移动设备，您可以检查用户代理并基于此为 body 元素分配一个类。这是我过去所做的：

在应用程序控制器中：

def is_phone?
  ua = request.user_agent.try(:downcase)
  if ua =~ /android/ && ua =~ /phone/
    true
  elsif ua =~ /iphone|ipod/ && ua !=~ /ipad/
    true
  elsif ua =~ /blackberry/ && ua !=~ /tablet/
    true
  elsif ua =~ /windows phone/
    true
  else
    false
  end
end
helper_method :is_phone?

然后在你的元素上布局：

<body class="<%= 'phone' if is_phone? %>">

然后在您的样式表中为移动样式创建一个部分

body {
  &.phone {
    /* your phone-specific styles go here */
  }
}

另外，我注意到您使用 Bootstrap 标记了您的问题，它是开箱即用的响应式。这里有一些很好的文档解释了如何使用框架进行响应式样式：http://getbootstrap.com/css/#grid

【讨论】：