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

Automatic detection browser resize with change active element

我需要通过调整浏览器大小来激活元素。我有以下代码段,

<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>

这里,如果网页内容在 "Desktop" 视图中,那么桌面图标将被激活,如上面的代码段。截图如下,

同样的方法,如果我将此内容宽度范围调整到笔记本电脑 window 之间,那么 "Laptop" 图标将处于活动状态。我不会通过单击或事件更改此图标。任何 CSS 或 jQuery 代码都可以用来解决这个问题。

您熟悉 CSS Media Queries 吗?它们似乎非常适合您描述的内容。

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

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