由一种比较好响应式表格设计而引发的响应式设计核心本质顿悟

之前有次花过两三天,考虑和寻求,响应式表格的比较好的实现方案,未果。直至今日遇到了materializecss中的做法。

表格在小屏幕上有什么问题?

表格的表头往往会比较宽,又有很多行。在屏幕宽度缩小时,如果整体全部缩小,字就用拥挤在一起,不好看。但是如果往下流呢?怎么流呢?不好流。这里存在两个主要问题:一、表头宽,二、表格行数多。

Bootstrap的做法(简单直接)

Bootstrap的方案也只是在水平方向上显示一个滚动条。这样的效果并不好。因为数据是以一行为一条记录,一行为一个对象,可如今一行被割裂了,需要滚动条来显示。失去了完整感。

Bootstrap这个响应式表格的效果。

#ABC First Last Handle Handle Handle
Mark Mark Otto @mdo @mdo @mdo
Jacob Jacob Thornton @fat @fat @fat
Larry Larry the Bird @twitter @twitter @twitter
缩放窗口大小对比效果

materializecss的新方案

今天发现materializecss里面关于table的部分。这个效果还是不错的,在屏幕缩小的时候,它会自动将上面的表头移动到左侧,然后将原来的数据行变为列。相当于把表格横过来了。

PC屏幕效果

手机屏幕效果

Responsive Design的顿悟

它这么做的原因也很简单,想一想,电脑屏幕和手机屏幕的有什么区别,或者说最重要的区别,我认为是显而易见的两点,一是电脑屏幕更大,二是电脑屏幕是横这放的,手机是竖着看的。

屏幕的大小可以通过缩放来解决,但是由横着看到竖着看,怎么解决呢?横竖颠倒!Very Clear!😊

其实这也就是Responsive Design要解决的关键问题,突然顿悟。

Resources