Windows Task View是Windows系统自带的多窗口管理功能，支持将多个应用窗口按不同比例平铺在屏幕上，实现多任务并行处理。这种分屏协作的思路可以应用到前端页面开发中，通过HTML搭建多窗口结构，配合CSS布局属性实现类似的多窗口协作效果。
基础HTML结构设计
首先需要搭建多窗口的基础HTML结构，每个窗口作为一个独立的容器，内部包含窗口标题栏和内容区域，整体用一个外层容器包裹所有窗口。
<div class="task-view-container">
<div class="window">
<div class="window-header">窗口1</div>
<div class="window-content">
<p>这是第一个窗口的内容区域</p>
</div>
</div>
<div class="window">
<div class="window-header">窗口2</div>
<div class="window-content">
<p>这是第二个窗口的内容区域</p>
</div>
</div>
<div class="window">
<div class="window-header">窗口3</div>
<div class="window-content">
<p>这是第三个窗口的内容区域</p>
</div>
</div>
</div>
CSS分屏布局实现
参考Windows Task View的分屏逻辑，我们可以使用CSS Grid布局来实现多窗口的平铺排列，支持不同数量的窗口自适应调整占比。
外层容器配置
外层容器设置为Grid布局，根据窗口数量自动划分列，同时设置容器占满整个可视区域，模拟全屏分屏的效果。
.task-view-container {
display: grid;
/* 自动填充列，每列最小宽度300px，最大1fr */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 10px;
padding: 10px;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f0f0f0;
}
窗口样式配置
每个窗口设置独立的边框和阴影，模拟系统窗口的视觉效果，标题栏和内容区域做区分，方便用户识别不同窗口的功能。
.window {
border: 1px solid #ccc;
border-radius: 8px;
background-color: #fff;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.window-header {
height: 40px;
line-height: 40px;
padding: 0 15px;
background-color: #e8e8e8;
font-weight: bold;
border-bottom: 1px solid #ccc;
user-select: none;
}
.window-content {
flex: 1;
padding: 15px;
overflow-y: auto;
}
模拟Task View的分屏调整逻辑
Windows Task View支持用户拖动窗口边缘调整分屏占比，我们可以通过CSS的grid-column属性配合简单的交互逻辑实现类似效果。以下是调整窗口占比的CSS配置和示例JS逻辑。
/* 窗口占满2列的配置 */
.window-col-2 {
grid-column: span 2;
}
// 点击窗口标题栏切换窗口占比
document.querySelectorAll('.window-header').forEach(header => {
header.addEventListener('click', function() {
const windowEl = this.parentElement;
// 如果已经占2列就恢复1列，否则设置为占2列
if (windowEl.classList.contains('window-col-2')) {
windowEl.classList.remove('window-col-2');
} else {
windowEl.classList.add('window-col-2');
}
});
});
不同分屏场景适配
Windows Task View有多种分屏模式，比如左右等分、三窗口平铺、一大两小等，我们可以通过预设不同的Grid配置类来实现这些场景。
| 分屏模式 | CSS配置 | 适用场景 |
|---|---|---|
| 左右等分 | grid-template-columns: 1fr 1fr; | 两个窗口并行操作 |
| 三窗口平铺 | grid-template-columns: 1fr 1fr 1fr; | 三个任务同时处理 |
| 一大两小 | grid-template-columns: 2fr 1fr 1fr; | 主窗口展示核心内容，辅助窗口展示次要信息 |
注意事项
- 窗口内容区域需要设置
overflow-y: auto，避免内容过多撑破窗口布局 - Grid布局的
gap属性可以调整窗口之间的间距，模拟系统窗口的间隔效果 - 如果需要在移动端适配，可以将
grid-template-columns的minmax最小值调小，避免窗口过窄无法操作
这种多窗口协作布局适合开发后台管理系统、多文档编辑器、数据监控面板等需要同时展示多个独立模块的场景，参考Windows Task View的交互逻辑可以让用户更快上手操作。
Windows_Task_View分屏布局CSS_gridHTML多窗口前端布局修改时间：2026-07-18 00:27:26