在网页开发中，适配不同屏幕分辨率是一项重要的任务，因为它能确保内容在各种尺寸的设备上都能正确显示。本文将详细介绍如何使用JavaScript来判断屏幕分辨率，并根据不同的分辨率执行不同的操作，如显示不同的CSS样式。
JavaScript提供了`screen`对象，它包含了有关用户设备屏幕的信息。其中`screen.width`和`screen.height`分别代表屏幕的宽度和高度。我们可以利用这些属性来判断用户的屏幕分辨率。例如，以下是一个简单的示例：
```javascript
<script>
function checkResolution() {
var width = screen.width;
var height = screen.height;
alert("你的屏幕分辨率为 " + width + "x" + height);
}
</script>
```
这个函数会在页面加载时弹出一个警告框，显示用户的屏幕分辨率。
针对特定分辨率执行操作，可以使用条件语句，如`if...else`结构。例如，如果要针对1440x900的分辨率显示特定信息，可以这样编写：
```javascript
<script>
function handleResolution() {
if (screen.width == 1440 && screen.height == 900) {
alert("1440x900 分辨率");
} else {
alert("其他分辨率");
}
}
</script>
```
更通用的方法是使用范围判断，例如，当屏幕宽度大于或等于1440像素时加载广告：
```javascript
if (screen.width >= 1440) {
// 加载广告代码
}
```
此外，JavaScript还可以用来动态地更改CSS样式文件，以适应不同分辨率的屏幕。这通常在`window.onload`事件中完成，确保DOM完全加载后再执行。以下是一个示例，根据屏幕宽度切换不同的CSS文件：
```html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" id="styleSheet" type="text/css" href="default.css">
<script type="text/javascript">
window.onload = function() {
var styleSheet = document.getElementById("styleSheet");
var infoDiv = document.getElementById("info");
if (screen.width > 1024) {
styleSheet.setAttribute("href", "wide.css");
infoDiv.innerHTML = "你的电脑屏幕宽度大于1024，背景色现在是红色。";
} else {
styleSheet.setAttribute("href", "default.css");
infoDiv.innerHTML = "你的电脑屏幕宽度小于或等于1024，背景色现在是蓝色。";
}
}
</script>
</head>
<body>
<div id="info"></div>
</body>
</html>
```
在这个例子中，当屏幕宽度大于1024像素时，`styleSheet`的`href`属性会更改为`wide.css`，否则保持为`default.css`。同时，`infoDiv`的内容也会根据分辨率变化。
总结来说，通过JavaScript，我们可以轻松地检测用户的屏幕分辨率，并根据这些信息调整页面内容或样式。这有助于提高用户体验，确保网页在不同设备上都能呈现出最佳效果。在实际应用中，可以结合媒体查询（Media Queries）和其他响应式设计技术，实现更加精细的布局控制。
