在当今这个多屏时代，不同设备、不同分辨率的屏幕层出不穷。如何让我们的脚本或应用在这些屏幕上都能良好地运行，是一个值得探讨的问题。本文将为你一图看懂如何让脚本轻松适配各种屏幕分辨率。
一、响应式布局
响应式布局是适配不同屏幕分辨率的关键。它通过CSS媒体查询（Media Queries）来实现，可以根据屏幕尺寸、分辨率等因素调整页面布局和样式。
1. CSS媒体查询
CSS媒体查询允许你针对不同的屏幕尺寸应用不同的样式。以下是一个简单的示例：
@media screen and (max-width: 600px) {
body {
background-color: red;
}
}
在上面的代码中，当屏幕宽度小于或等于600px时，背景颜色将变为红色。
2. 响应式图片
响应式图片可以通过<img>标签的srcset属性来实现。它允许你为不同分辨率的屏幕提供不同大小的图片。
<img src="image.jpg" srcset="image-600w.jpg 600w, image-1200w.jpg 1200w">
在上面的代码中，当屏幕宽度小于或等于600px时，将加载image-600w.jpg图片；当屏幕宽度大于600px时，将加载image-1200w.jpg图片。
二、视口（Viewport）
视口是用户在浏览器中看到的区域。通过调整视口的大小，可以改变页面的布局和内容。
1. 确定视口宽度
在HTML文档中，可以通过<meta>标签的viewport属性来设置视口宽度。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在上面的代码中，视口宽度将与设备屏幕宽度相同。
2. 缩放视口
通过调整initial-scale属性，可以控制视口的缩放比例。
<meta name="viewport" content="width=device-width, initial-scale=0.5">
在上面的代码中，视口将缩放为原始大小的50%。
三、JavaScript适配
JavaScript可以帮助我们动态地调整页面布局和样式，以适应不同的屏幕分辨率。
1. 获取屏幕尺寸
可以使用window.innerWidth和window.innerHeight来获取屏幕的宽度和高度。
console.log('屏幕宽度：' + window.innerWidth);
console.log('屏幕高度：' + window.innerHeight);
2. 动态调整样式
根据屏幕尺寸，我们可以动态地调整样式。
if (window.innerWidth < 600) {
document.body.style.backgroundColor = 'red';
} else {
document.body.style.backgroundColor = 'blue';
}
总结
通过响应式布局、视口和JavaScript适配，我们可以轻松地让脚本适配各种屏幕分辨率。在实际开发中，可以根据具体需求选择合适的方法，以确保页面在不同设备上都能呈现出最佳效果。