3

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

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

这在一定程度上起作用，但我不确定我是否以正确的方式去做。

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

然后，我为 979px - 768px 媒体查询使用相同的 html 块（根据需要修改布局）并使用“隐藏桌面可见平板电脑隐藏电话”。

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

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

4

1 回答 1

1

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

.visible-xs-portrait,
.visible-xs-landscape {
  display: none !important;
}

.visible-xs-portrait{
  @media (max-width: @screen-xs-max)  and (orientation:portrait) {
    display: block;
  }
} 

.visible-xs-landscape{
  @media (max-width: @screen-xs-max)  and (orientation:landscape) {
    display: block;
  }
}

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

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

于 2015-07-26T20:50:58.943 回答