小编Ami*_*eem的帖子

我想添加基于屏幕分辨率而不是视口的 CSS 样式。

情况如下：我的屏幕分辨率为 (1980px x 1080px)，如果我将 Windows 10“缩放和布局”设置为 125%，它会更改屏幕的视口并显示该视口样式。我想根据屏幕分辨率而不是视口显示我的媒体风格。

目前，我正在使用这些媒体查询来获得高分辨率：

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

我们可以只使用 CSS 而不是 JS 来实现这一点吗？

截图：

窗口 10 比例 100%：

100% 比例的视口：

窗口 10 比例 125%：

比例为 125% 的视口：

最近，我在一个项目中遇到了这个问题，在主题中，它在标签上使用了单击功能<span>。除了 Safari 之外，它在所有浏览器上都运行良好。我做了一些研究，发现很多人在 Safari 上都遇到过此类问题。

我根据此处找到的信息解决了我的问题role="button"：<span class="menuOpen" role="button">Menu</span>Click event on <span> or <div> tag not working safari issues

但这个问题让我想知道我们可以将哪些元素用于“点击”事件。

据我所知，我们可以click在几乎所有元素上添加事件，但根据 HTML 标准，我们应该仅在<a>或<button>标签上添加点击事件。

我们还应该使用其他 HTML 元素来触发click事件吗？