自动检测浏览器随更改活动元素调整大小
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
...
}
}
我需要通过调整浏览器大小来激活元素。我有以下代码段,
<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
...
}
}