图片点击弹出框：如何实现不同屏幕大小的偏移调整

""在实现点击图片弹出一个框时，可以使用CSS中的绝对定位（position: absolute）来实现框的位置调整。根据不同屏幕大小，可以使用媒体查询（media query）来设置不同的偏移量。\n\n首先，创建一个HTML结构，包含一个图片和一个弹出框：\n\nhtml\n<div class="container">\n <img src="your-image.jpg" alt="Image" id="image">\n <div class="popup" id="popup">\n <!-- 弹出框内容 -->\n </div>\n</div>\n\n\n接下来，使用CSS来样式化图片和弹出框，并设置初始状态为隐藏：\n\ncss\n.container {\n position: relative;\n}\n\n#image {\n width: 100%;\n max-width: 500px;\n height: auto;\n}\n\n.popup {\n position: absolute;\n top: 0;\n left: 0;\n display: none;\n /* 弹出框样式 */\n}\n\n\n然后，使用JavaScript来实现点击图片弹出框的功能：\n\njavascript\n// 获取图片和弹出框元素\nconst image = document.getElementById('image');\nconst popup = document.getElementById('popup');\n\n// 监听图片的点击事件\nimage.addEventListener('click', function() {\n // 显示弹出框\n popup.style.display = 'block';\n});\n\n// 监听窗口大小变化事件\nwindow.addEventListener('resize', function() {\n // 根据窗口大小调整弹出框的位置\n const offset = image.getBoundingClientRect();\n popup.style.top = offset.top + 'px';\n popup.style.left = offset.left + 'px';\n});\n\n\n在窗口大小变化时，通过getBoundingClientRect()方法获取图片在视口中的位置信息，然后根据这些位置信息来设置弹出框的位置，实现不同屏幕大小下的偏移调整。"\