Question

嗨，我正在网页上工作，我发现设计带有不同移动宽度的文字的横幅很困难。所以在移动设备中我想只显示所有移动宽度中垂直居中的标题，剩下的段落，内容和按钮应该降下来。移动设备将具有不同的宽度，具体取决于对齐是否变坏。任何机构都可以帮助我在移动设备中渲染此页面的最简单的方法是只有顶部，垂直对齐的中间和剩余的段落和按钮的标题应该下降。我使用边距，所以PLZ帮助我找到除边缘之外的最佳方法。

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

Answer 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; 
        }
}

Answer 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

渲染横幅图像与文本为不同的移动屏幕分辨率

2 个答案: