横向布局更改为纵向

Posted 2023-03-07

【中文标题】横向布局更改为纵向

【英文标题】：Landscape layout change to portrait

【发布时间】：2015-05-11 22:08:07

【问题描述】：

我有一个使用 Google Chrome 浏览器为横向桌面计算机制作的大型项目。

但是突然要求它现在必须在 Portrait 计算机上运行（它不是移动/ipad/平板设备，而是多合一触摸屏计算机）。我正在寻找一些聪明的方法，但仍然找不到。

<div id='i_wasdesigned_for_landscape'>
Landscape: My texts are horizontally from left to right
<button>left to right: 1</button>
<button>left to right: 2</button>
</div>

现在我需要将这个：i_wasdesigned_for_landscape 放入纵向屏幕 怎么装？

【问题讨论】：

谷歌“媒体查询”：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

屏幕保持横向。但在物理上，方向被旋转到看起来像肖像（它很复杂）

我们所看到的仍然是横向的，但屏幕只是顺时针旋转 90 度以产生纵向效果。

【参考方案1】：

用途：

transform: rotate(-90deg);
zoom: 0.95;