CSS折叠和自动适应窗口是Web开发中常见的两个问题。CSS折叠可以让页面中的部分内容在默认情况下不显示，只有当用户进行特定操作后才会显示。自动适应窗口则可以让页面在不同尺寸的设备上都能够自适应，以保证用户体验。

/* CSS折叠 */.content {height: 0;overflow: hidden;transition: height 0.3s ease;}.content.show {height: auto;}/* HTML代码 */<div ><h2 >点击展开/折叠</h2><div ><p>这是要折叠的内容</p></div></div><script>// 实现点击展开/折叠效果var title = document.querySelector('.title');var content = document.querySelector('.content');title.addEventListener('click', function() {content.classList.toggle('show');});</script>

以上代码实现了一个简单的CSS折叠效果。首先，我们为内容容器设置一个默认高度为0，并使用overflow: hidden隐藏其内容。然后，为了让内容在展开/折叠时有动态效果，我们使用transition属性。最后，通过JavaScript实现点击标题时，为内容容器增加/删除show类，从而控制其高度。

/* 自动适应窗口 */.container {width: 100%;max-width: 1200px;margin: 0 auto;}/* HTML代码 */<div ><p>这是要自适应宽度的内容</p></div>

以上代码实现了一个简单的自动适应窗口效果。我们为容器设置一个最大宽度，并使用margin: 0 auto将其水平居中。这样，在窗口宽度小于最大宽度时，容器会自动缩小以适应窗口，从而保证了页面的可读性。

综上所述，CSS折叠和自动适应窗口都可以为Web开发带来更好的用户体验。通过使用以上的代码片段，我们可以简单快捷地实现这两个效果。