自动检测浏览器调整大小并更改活动元素

Posted 2023-03-17

【中文标题】自动检测浏览器调整大小并更改活动元素

【英文标题】：Automatic detection browser resize with change active element

【发布时间】：2020-07-19 04:46:50

【问题描述】：

我需要使用调整浏览器大小来激活元素。我有以下代码段，

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="card page-builder-card">
        <div class="header">
            <ul class="mobile-device-view">
                <li>
                    <a href=""><i class="fa fa-mobile" aria-hidden="true"></i></a>
                </li>
                <li>
                    <a href=""><i class="fa fa-tablet" aria-hidden="true"></i></a>
                </li>
                <li>
                    <a href=""><i class="fa fa-laptop" aria-hidden="true"></i></a>
                </li>
                <li>
                    <a class="active" href=""><i class="fa fa-desktop" aria-hidden="true"></i></a>
                </li>
            </ul>
        </div>
        <div class="body">
            <div class="page-ui-content">

            </div>
        </div>
    </div>
</div>

在这里，如果网页内容在“桌面”视图中，那么桌面图标将像上面的代码段一样处于活动状态。截图如下，

如果我将此内容宽度范围调整为笔记本电脑窗口之间的大小，那么“笔记本电脑”图标将处于活动状态。我不会通过单击或事件来更改此图标。任何 CSS 或 jQuery 代码都将被接受来解决这个问题。

【参考方案1】：

你熟悉 CSS Media Queries 吗？它们似乎非常适合您的描述。

媒体查询允许您在特定屏幕或设备尺寸触发 CSS 规则。因此，例如，如果您希望 <a> 标记之一仅在屏幕处于特定宽度之间时获得活动样式，您可以使用：

@media only screen and (max-width: 480px)
    li#mobile > a
        ...
        /* whatever rules are used for "active" styling
        ...