JavaScript 如何根据页面大小进行改变

在网页开发中，让页面元素根据页面大小进行相应改变是提升用户体验的关键环节。JavaScript 作为强大的脚本语言，为实现这一功能提供了诸多有效方法。

可以利用 window 对象的 resize 事件。通过监听这个事件，我们能够实时捕捉页面大小的变化。比如，使用以下代码：

window.addEventListener('resize', function() {
    // 在此处编写页面大小改变时要执行的代码
});

在这个回调函数中，我们可以获取当前页面的宽度和高度。通过 window.innerWidth 和 window.innerHeight 就能分别得到页面可视区域的宽度和高度。例如：

window.addEventListener('resize', function() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    console.log('当前页面宽度：' + width + '，高度：' + height);
});

有了页面大小的信息，就可以据此对页面元素进行改变。比如，根据页面宽度调整某个元素的字体大小。假设页面中有一个 id 为 “main-title” 的标题元素，我们可以这样做：

window.addEventListener('resize', function() {
    var width = window.innerWidth;
    var title = document.getElementById('main-title');
    if (width < 600) {
        title.style.fontSize = '16px';
    } else if (width < 900) {
        title.style.fontSize = '20px';
    } else {
        title.style.fontSize = '24px';
    }
});

除了改变字体大小，还可以调整元素的布局。例如，将两列布局在窄屏时变为单列布局。假设有两个 div 元素，class 分别为 “column1” 和 “column2”，代码如下：

window.addEventListener('resize', function() {
    var width = window.innerWidth;
    var column1 = document.querySelector('.column1');
    var column2 = document.querySelector('.column2');
    if (width < 768) {
        column1.style.float = 'none';
        column2.style.float = 'none';
    } else {
        column1.style.float = 'left';
        column2.style.float = 'left';
    }
});

另外，使用 CSS 媒体查询结合 JavaScript 也是不错的选择。媒体查询可以在不同屏幕尺寸下应用不同的 CSS 样式，而 JavaScript 可以动态地添加或移除 CSS 类，进一步增强页面响应式的灵活性。

通过这些方法，利用 JavaScript 根据页面大小改变页面元素，能打造出更加自适应、用户体验更佳的网页。