Question

所以我正在使用kickstrap开发一个Web应用程序，尽管这是一个引导问题。

每个媒体查询/屏幕尺寸我需要完全不同的布局（即html结构）。当在平板电脑和手机上观看时，特定html元素的含义会移动到屏幕上完全不同的位置，从而变成不同的跨度宽度等。

这是有道理的，但我不确定我是否会采取正确的方式。

现在我有我的桌面html，我使用bootstrap响应实用程序来隐藏和显示。示例：我的主要桌面视图是“visible-desktop hidden-tablet hidden-phone”

然后，我为979px - 768px媒体查询提供了相同的html块（根据布局更改需要进行了修改），并使用了“隐藏式桌面可视平板电脑隐藏式手机。

我认为这是跟踪各种布局并在以后必要时进行更改的最简单方法。然而，问题是当我进入手机布局时。我需要一个独特的手机风景和一个独特的手机肖像。使用隐藏/可见电话不允许我区分这两者。

所以我想我的第一个问题是......这是一个很好的方式来满足我的需求还是我完全走错了路？如果我的想法错了，我该怎么办？

Answer 1

您可以创建几个响应式实用程序来微调移动布局（LESS源）：

  # Deletes this Round's stats from its Case
  def delete_round
    round = Round.new
    round.assign_attributes(self.attributes)
    round.assign_attributes(self.changed_attributes)
    self.case.delete_round(round)
  end

将 display：block 替换为 .responsive-visibility（）; 如果您在仿表元素上使用它。

对于一般策略，推/拉类或flexbox可能是更有效的方法。没有页面示例和浏览器支持要求就不能说。

完全不同的布局与bootstrap / kickstrap中的媒体查询

1 个答案: