显示 flex 和变换旋转答案

【问题标题】：display flex together with transform rotate显示 flex 和变换旋转
【发布时间】：2016-06-12 16:36:11
【问题描述】：

我有一个 qwixx 游戏的在线记分卡，使用 "display: flex" 和 "vmin" 作为边距和字体大小。所以它使用完整的视口并且响应速度非常快。

但我的问题是智能手机/平板电脑的纵向模式以及缺少通过网页强制横向模式的可能性。

如果用户锁定了他的方向或使用应用程序显示不支持横向模式的页面（例如 barcoo），我想在纵向模式下也给他横向的记分卡。

所以我尝试了“transform: rotate(90deg)”。

旋转效果很好，但响应式缩放效果不佳。看来浏览器在计算 flex 布局的宽度和高度时没有考虑旋转。

我使用的相关 CSS：

html, body, .container-fluid {
  height: 100%;
}

.row {
  display: flex;
  display: -webkit-flex;
  height: calc(100% / 6);
}

.btn {
  flex: 1;
  -webkit-flex: 1;
}

body {
  webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

@media all and (orientation:portrait) {
  body {
    webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

有人已经提出了这个问题并给我一个提示如何解决这个问题？或者可以给我一个替代解决方案的提示吗？

所需的行为是：在纵向模式下，页面应旋转 90 度，方法是使用完整的视口保持 flexbox 的响应式缩放行为。

【问题讨论】：

链接失效。这正是不允许仅链接问题的原因，您必须在问题本身中包含所有必要的代码。
为什么该链接对您不起作用？我将尝试制作一个 jsfiddle 并提取问题所需的所有 html/css。
哦，我明白了，我必须等待 10 秒才能加载链接。但我仍然不明白所需的行为。
哦，没错，对不起。它是 heroku 的一个测试应用程序实例，如果它因为在最后几分钟没有加载而休眠，则第一个页面加载需要几秒钟。期望的行为是：纵向模式应该通过保持 flexbox 的响应缩放行为来将页面旋转 90 度。

标签： css responsive-design flexbox css-transforms

【解决方案1】：

我想我找到了解决方案，我的 css 示例中重要且缺失的声明是：

围绕定义的角旋转（变换原点）
设置绝对位置，因为旋转偏移（90度=左：100vw）
交换高度和宽度定义

所以更改后的相关 css 现在看起来像：

.row {
  display: flex;
  display: -webkit-flex;
  height: calc(100vh / 6);
}

.btn {
  flex: 1;
  -webkit-flex: 1;
}

@media all and (orientation:portrait) {
  .container-fluid {
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: top left;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: top left;
    transform: rotate(90deg);
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 100vw;
    width: 100vh;
    height: 100vw;
  }

  .row {
    height: calc(100vw / 6);
  }
}

这很好用。唯一缺少的是现在的 iOS 问题，它们不会从视口大小中减去状态栏的大小。但这是现有解决方案的一个已知问题，所以我认为这是可以解决的。

您可以在此处进行测试：http://dqwixx-staging.herokuapp.com/（关心页面视图可能需要几秒钟）使用浏览器窗口（宽度较大）或智能手机/平板电脑处于纵向模式。

【讨论】：