灵活自如的纯 CSS 分屏效果，打造美观实用的布局

前端

2023-12-23 11:30:29

CSS 分屏：轻松实现灵活的网页布局

在网页设计中，分屏布局是一种流行且实用的技术，它允许我们将页面内容划分为不同的区域，并根据需要调整它们的尺寸和位置。传统的实现方法涉及使用 HTML 和 CSS 创建多个容器，这可能需要大量的代码和繁琐的调整。

CSS 分屏的优势

CSS 分屏提供了一种更简单、更灵活的替代方案。它利用 CSS 强大的布局功能，无需额外的 HTML 标记或复杂的 JavaScript 代码。CSS 分屏的主要优势包括：

简单易用： 只需使用几个 CSS 属性，即可轻松创建水平或垂直分屏。
灵活性： 通过拖动分隔线，可以轻松调整分屏比例，实现更灵活的布局。
响应性： 使用媒体查询，可以根据不同的屏幕尺寸调整分屏布局，确保响应式设计。

实现水平分屏

水平分屏将页面内容分为上下两个区域。典型的用法包括比较不同内容类型或显示主内容和侧边栏。以下是使用 CSS 实现水平分屏的示例代码：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 0 0 auto;
  background-color: #f1f1f1;
  padding: 20px;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
}

.resizer {
  height: 5px;
  background-color: #000;
  cursor: row-resize;
}

在上面的代码中，.container 是分屏的父容器，使用 flexbox 布局垂直排列分屏区域。.header 是头部区域，其高度自动调整以适应其内容。.content 是主体区域，占据剩余空间并允许垂直滚动。.resizer 是分隔线，允许用户通过拖动来调整分屏比例。

实现垂直分屏

垂直分屏将页面内容分为左右两个区域。它通常用于比较不同内容类型或显示主内容和侧边栏。以下是使用 CSS 实现垂直分屏的示例代码：

.container {
  display: flex;
  flex-direction: row;
  width: 100vw;
}

.sidebar {
  flex: 0 0 auto;
  background-color: #f1f1f1;
  padding: 20px;
}

.content {
  flex: 1 1 auto;
  overflow-x: auto;
}

.resizer {
  width: 5px;
  background-color: #000;
  cursor: col-resize;
}

在上面的代码中，.container 是分屏的父容器，使用 flexbox 布局水平排列分屏区域。.sidebar 是侧边栏区域，其宽度自动调整以适应其内容。.content 是主体区域，占据剩余空间并允许水平滚动。.resizer 是分隔线，允许用户通过拖动来调整分屏比例。

拖动分隔线

为了实现分隔线的拖动调整，可以使用 JavaScript 来监听分隔线上的鼠标事件，并相应地调整分屏区域的大小。以下示例代码展示了如何使用 JavaScript 启用分隔线拖动：

const resizer = document.querySelector('.resizer');

resizer.addEventListener('mousedown', function(e) {
  e.preventDefault();

  const container = resizer.parentNode;
  const header = container.querySelector('.header');
  const content = container.querySelector('.content');

  const mouseDownClientX = e.clientX;
  const mouseDownContainerWidth = container.offsetWidth;

  document.addEventListener('mousemove', mousemove);
  document.addEventListener('mouseup', mouseup);

  function mousemove(e) {
    const deltaX = e.clientX - mouseDownClientX;
    const newContainerWidth = mouseDownContainerWidth + deltaX;

    if (newContainerWidth < 0) {
      return;
    }

    container.style.width = `${newContainerWidth}px`;
    header.style.width = `${newContainerWidth}px`;
    content.style.width = `${newContainerWidth}px`;
  }

  function mouseup() {
    document.removeEventListener('mousemove', mousemove);
    document.removeEventListener('mouseup', mouseup);
  }
});

在这个例子中，resizer.addEventListener('mousedown', function(e) {...}) 监听分隔线上的鼠标按下事件，并记录鼠标按下的位置和分屏容器的宽度。document.addEventListener('mousemove', mousemove) 和 document.addEventListener('mouseup', mouseup) 分别监听鼠标移动和鼠标松开的事件，并根据鼠标移动的距离调整分屏区域的大小。

响应式分屏

为了确保分屏布局在不同的屏幕尺寸下都能正常显示，可以使用媒体查询来定义不同的分屏布局规则。以下示例代码展示了如何根据屏幕宽度调整分屏布局：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .header {
    flex: 1 1 auto;
  }

  .content {
    flex: 1 1 auto;
  }

  .resizer {
    display: none;
  }
}