js和css实现网页根据屏幕高度缩放，宽度不变

在JavaScript和CSS中，实现网页内容根据屏幕高度动态调整而宽度保持不变通常涉及媒体查询（Media Queries）和窗口大小监听。以下是基本步骤：

1. **使用CSS媒体查询**：
- 通过`@media`规则，你可以设置当视口宽度不变，高度改变时应用的样式。例如：

     @media (orientation: portrait) and (min-height: 600px) {
       body {
         /* 根据新的高度调整元素 */
         padding-bottom: calc(100vh - 480px); // 假设最小内容区域是480px高
       }
     }

这里假设你的主要内容区域应该始终占据视口高度减去底部空间。

2. **窗口大小变化事件处理** (JavaScript)：
- 使用JavaScript的`window.addEventListener('resize', function() { ... })`监听窗口大小变化。在回调函数中，你可以重新计算并应用相应的CSS样式。

   window.addEventListener('resize', function() {
     let newHeight = window.innerHeight;
     // 更新CSS规则，如之前所示
   });

3. **响应式布局**：
- 确保你的HTML结构采用了响应式设计，比如Flexbox或Grid布局，它们可以根据屏幕尺寸自动调整元素的位置和大小。

请注意，为了达到最佳效果，你可能还需要结合使用其他技术，如Bootstrap、Vue.js等前端框架，它们提供了更方便的响应式工具和组件。