onclick - 基于屏幕大小的不同 highslide onclick 事件

Question

我正在升级我们的网站，所以它是响应式的。

目前，我的一个典型链接具有 onclick 功能的硬编码宽度：

我使用的一个示例如下：

<a href="#" onclick="return hs.htmlExpand(this, { width: 700 } )">

<b>This is the title</b></a>

<div class="highslide-maincontent" style="font-weight:normal"> 

This is where the content is

</div>

但是我希望它在分辨率超过 500 像素时具有它，并且我希望它具有 90% 的宽度

谢谢

Answer 1

您可以使用 CSS 设置弹出窗口的宽度，而不是使用 onclick 中的 width 变量。
定义宽度：700px；对于所有浏览器宽度，并用width: 90%覆盖它；当浏览器的最大宽度为 500 像素时。

使用不带宽度变量的 onclick：

onclick="return hs.htmlExpand(this)"

在页面 head 部分的 highslide.css 文件下方添加以下内容：

<style type="text/css" media="all">
.highslide-html-content {
    width: 700px;
}
</style>
<style type="text/css" media="(max-width: 500px)">
.highslide-html-content {
    width: 90%;
}
</style>