图片点击弹出框：实现不同屏幕大小的偏移设置

"您可以使用CSS媒体查询来为不同屏幕大小设置不同的偏移量。\n\n首先，您需要在HTML中创建一个包含图片和弹出框的容器元素，如下所示：\n\nhtml\n<div class="container">\n <img src="your-image.jpg" alt="Image">\n <div class="popup">Your popup content here</div>\n</div>\n\n\n然后，您可以使用CSS来设置容器元素的位置以及弹出框的样式：\n\ncss\n.container {\n position: relative;\n}\n\n.popup {\n position: absolute;\n top: 0;\n left: 0;\n display: none;\n /* 设置弹出框的样式 */\n}\n\n/* 在大屏幕上显示弹出框 */\n@media screen and (min-width: 768px) {\n .popup {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n}\n\n\n在上面的代码中，.container 使用 position: relative; 来作为弹出框的参考点。.popup 使用 position: absolute; 来将其从文档流中取出，并使用 top 和 left 设置其位置。.popup 的默认样式为 display: none;，以便在页面加载时隐藏它。\n\n然后，通过使用 @media 查询和 min-width 的条件，我们可以针对大屏幕（宽度大于等于768px）设置不同的偏移量。在这个例子中，我们将 .popup 的 top 和 left 设置为50%，并使用 transform: translate(-50%, -50%); 来将其居中对齐。\n\n最后，您可以使用JavaScript来实现点击图片显示弹出框的功能：\n\njavascript\nconst container = document.querySelector('.container');\nconst popup = container.querySelector('.popup');\n\ncontainer.addEventListener('click', () => {\n popup.style.display = 'block';\n});\n\ndocument.addEventListener('click', (event) => {\n if (!container.contains(event.target)) {\n popup.style.display = 'none';\n }\n});\n\n\n在上面的代码中，我们首先获取容器元素和弹出框元素的引用。然后，我们在容器元素上添加一个点击事件监听器，当点击容器元素时，将弹出框的 display 属性设置为 block，以显示它。接下来，我们在整个文档上添加一个点击事件监听器，当点击文档中的任意位置时，检查点击的目标是否在容器元素内部，如果不是，则隐藏弹出框。\n\n这样，无论是在小屏幕还是大屏幕上，当点击图片时都会弹出框，并根据屏幕大小设置不同的偏移量。