Question

我有一个（好的？）响应式表格设计（使用flex完成） - 如果显示器足够宽，它看起来像这样（标签'c'和'd'旋转-90）：

|aaaaaaa|bbbbbbb|c   |d   |
|       |       |c   |d   |
|       |       |c   |d   |
+-------+-------+----+----+
|   1111|   2222|3   |4   | 
+-------+-------+----+----+
|   xxxx|   yyyy|z   |?   |

如果它变小（变小），则变为：

|aaaaaaa|bbbbbbb|
|c      |d      |
|c      |d      |
|c      |d      |
+-------+-------+
|   1111|   2222|
|3      |4      |   
+-------+-------+
|   xxxx|   yyyy|
|z      |?      |

到目前为止一直很好，工作，并且正在玩转换和填充。

编辑：诀窍是让所有旋转的标签具有相同的高度和宽度;

让我们说 - 现在我必须为标签添加背景 - 问题是，c＆amp; d的旋转div具有适合我逻辑的固定高度和宽度。

编辑：问题是翻译的文字不再适合;

但他们应该：

width: 100%parent_height;
height: 100%parent_width;

不要谈论top和left

我的jQuery解决方案看起来像这样（只是反式H和W）：

rotate90=()->
    $('.rotate90').each (i,e) =>
        $e=$(e)
        $e.css(width: '100%', height: '100%')
        [w,h]=[$e.outerWidth(),$e.outerHeight()]
        $e.outerWidth(h).outerHeight(w)
        .css(top: (h-w)/2, left: (w-h)/2)

并在需要时调用它

$(window).load( =>
    rotate90()
    $(window).on('resize.rotate90', rotate90)   
)

后面的CSS很简单

.rotate90 {
  transform: rotate(-90deg);
  text-align: left;
  width:100%;
  height:100%;
  position: absolute;
}

但有没有办法实现无脚本编写？

Fiddle Fiddle 2 with different width and long text

Answer 1

您可以使用

@media screen and (min-width: 480px) {
     .rotate90 {
       transform: rotate(-90deg);
       text-align: left;
       width:100%;
       height:100%;
       position: absolute;
}

谷歌不同的@media屏幕变化，并根据您的设备屏幕尺寸找到您想要使用的那些。

您不需要脚本来创建轮播

您可能还想为css添加转换时间，以便更顺畅

.rotate90{
transition: 2s;
 -webkit-transition: 2s;
}

是否只有CSS在响应式设计中旋转90度？

1 个答案: