使用更改活动元素自动调整浏览器大小

Question

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

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

此处，如果Web内容处于“桌面”视图中，则桌面图标将处于活动状态，例如上述代码段。屏幕截图如下，

以同样的方式，如果我调整此内容的宽度范围是在“笔记本电脑”窗口之间，则“笔记本电脑”图标将处于活动状态。我不会通过单击或事件来更改此图标。任何CSS或jQuery代码都可以接受以解决此问题。

Answer 1

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

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

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