项目 2022-07-03 23:29 作者:baidu    浏览:143    

今天遇到了一个有趣的问题。 一位群友问我,仅凭CSS能否实现这种响应性的布局效果。

让我们简单分析一下效果:

如果屏幕视口较大,它将显示为整个Table的样式

如果“屏幕”视口的宽度很小,则原始表中每行的数据将单独显示在一个表中

通过有趣的响应布局,信息在小屏幕下得到了很好的展示。

那么,仅靠CSS能实现这样的布局吗? 答案是好的。

首先,毫无疑问会使用媒体查询。 这个很容易理解。 此外,我们还观察了每个分割的数据集。

原本就存在整体成为一个标签时的标题信息集。 主要的难点在这里。 在分一个个子标签进行展示时,如何同时展示这些标题信息?

首先,实现普通宽屏下的HTML和对应的CSS。

很简单。 这里没有什么特别的地方。 您可以使用标签,也可以使用divul等标签模拟表单。

我得到了这么简单的Table :

下一步也很简单,设定合适的阈值,使用媒体查询将一个Table分割为多个子Table。

在这里做的事情也很简单:

使用媒体查询设置屏幕宽度较小的样式

去掉原表的标题,直接隐藏就可以了

将原始的一行设置为,并将下边的间隔设置为分开

将原始行中的设置为。 这样一来,它们就会纵向排列,分别形成新的子标签

那么,像这样,在屏幕宽度小的情况下,我们得到了这样的Table :

下一步是如何在子table的每一行中显示原始标题信息呢?

这里其实也很简单,只是简单地使用虚拟要素,实现了可以读取极其HTML标签属性的小特性。

只需简单地改造代码,将相应的标题列描述信息带到每个HTML中即可。

其次,利用td的虚拟要素,实现标题信息的展示即可。

这里,我们的核心知识点是利用要素的虚拟要素在属性中,可以读取其HTML要素内的属性内容并进行展示的知识点。

假设HTML标记定义如下:

如果与该div对应地设定了虚拟类,则可以读取data-msg值,相当于

这样,我们在小屏幕下,取得了这样的效果:

完整的效果应如标题图所示。

疑似要素的这一特性实际上可以适用于日常效果的非常多的地方,以前也在很多文章中提到过。

更多精彩的CSS技术文章被我的Github -- iCSS总结并不断更新。 欢迎使用star订阅收藏。


 
打赏