在编写前端页面时，经常需要使用列表（List）展示一些信息，比如商品列表、文章列表等。然而，单纯的列表可能无法满足我们的需求，特别是在不同设备上的展示效果不同。因此，我们需要设计响应式可伸缩的 HTML 列表。
下面就来介绍如何设计响应式可伸缩的 HTML 列表。
响应式设计
响应式设计是指网站可以根据不同设备（例如，电脑、平板、手机等）的屏幕尺寸和分辨率来进行调整，以最大化页面的用户体验。在展示列表时，我们需要考虑以下几点：
列表的布局应该适应不同的屏幕尺寸，并且在不同屏幕尺寸下展示的信息应该保持一致。
当屏幕尺寸较小时，我们需要考虑如何节约空间，使得信息可以被正常展示，而不会被挤压。
下面是一个响应式列表的示例代码：
--- -------------
----
---- -------------- ---------- ---
------ ------
----- -----
-----
----
---- -------------- ---------- ---
------ ------
----- -----
-----
----
---- -------------- ---------- ---
------ ------
----- -----
-----
-----在上述代码中，我们使用无序列表（unordered list）来展示信息。每个列表项（list item）包含了一张图片、一个标题和一段内容。接下来我们考虑如何让这个列表变得响应式。
首先，我们需要确定列表在不同屏幕尺寸下的布局。在较大的屏幕上（例如电脑），我们可以让每个列表项横向排列，类似于表格的布局。在较小的屏幕上（例如手机），我们可以让每个列表项竖向排列，类似于卡片的布局。具体实现如下：
-- ------- --
----- -
-------- ------
------------- ------
------ -----
------- --
-------- --
-
----- -- -
-------- -----------
------ ----
-------- -----
----------- -------
--------------- ----
-
-- ------- --
------ ----------- ------ -
----- -
-------- ------
-
----- -- -
-------- ------
------ -----
------- --
-------- -----
-
-在上述代码中，我们通过 display 属性来设置列表项的排列方式。在大屏幕上，我们将列表的 display 属性设置为 table，并将每个列表项的 display 属性设置为 table-cell，这样列表项会横向排列，类似于表格的样式。我们还将每个列表项的宽度设置为 33%，以保证三个列表项可以平均分配宽度。
在小屏幕上，我们使用 @media 查询来判断屏幕尺寸是否小于 768px。如果是，我们将列表和列表项都变为块级元素（display: block），并将列表项的宽度设置为 100%，这样列表项会竖向排列。
可伸缩设计
当列表中的内容较多时，在较小的屏幕上，我们可能需要滚动来查看全部内容。但当屏幕尺寸变大时，我们可以希望让列表展示更多的内容，从而避免滚动。因此，我们需要让列表具有可伸缩的特性。
为了实现可伸缩的列表，我们需要使用 JavaScript 来动态调整列表的高度。当视口尺寸发生变化时，我们需要计算列表中的内容高度与视口高度之间的差值，并将差值分配给列表项的高度。示例代码如下：
--- -------------
----
---- -------------- ---------- ---
------ ------
----- ------- ------- ------- ------- ------- ------- ------- ---------
-----
---- --- ----- --- ---
-----
--------
--- ----------- - --------------------------------
--- ---------------- - -----------------------------------
--------------------------------- ---------- -
--- -------------- - -------------------
--- ------------- - --
--- ---- - - -- - - ------------------------ ---- -
--- --------------- - --------------------
--- ---------- - -------------------------------------
--- --------- - ------------------------------------
--- -------- - -----------------------------------
------------- -- ----------------------- - ---------------------- - ----------------------
-
--- ---- - -------------- - --------------
--- -------------- - ------------- - ------------------------
--- ---- - - -- - - ------------------------ ---- -
--- --------------- - --------------------
---------------------------- - --------------- - ---- - ------------------------ - -----
-
---
---------在上述代码中，我们通过 querySelector 和 querySelectorAll 方法来获取列表元素和列表项元素，并通过 resize 事件来监听视口尺寸是否发生变化。当视口尺寸变化时，我们需要计算列表的内容高度和视口高度之间的差值，以及每个列表项的高度。然后，我们根据差值和列表项数目，计算出每个列表项应该拥有的高度，并将其设置为实际高度。
结论
通过以上的设计，我们可以实现响应式可伸缩的 HTML 列表。在设计响应式列表时，我们需要确定不同屏幕尺寸下的布局，并进行适当的调整。在设计可伸缩列表时，我们需要使用 JavaScript 来实现动态高度，以满足不同屏幕下的需求。
当你需要使用列表展示信息时，不妨尝试一下这些设计，以增强你的页面展示效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f4b259c5c563ced563ac72