Question

我在下面的HTML中显示了一个列表。

HTML：

<div id="Footer">
  <ul>
   <li><a href="#" title="AGB">AGB</a></li>
   <li><a href="#" title="Impressum">Impressum</a></li>
   <li><a href="#" title="Datenschutz">Datenschutz</a></li>
   <li><a href="#" title="Copyrightbestimmungen">Copyrightbestimmungen</a></li>
  </ul>
</div>

使用以下JavaScript我想要整理一个列表点。这是必要的，因为必须为移动设备的视口最小化页脚。

JavaScript：

var t = document.querySelectorAll('a[title=Datenschutz]');
t[0].parentNode.style.display = "none";

现在我想扩展这个功能，以便在使用移动设备时，或者视口/最大设备宽度低于1024px。（见下文）。超过此大小，应忽略上面的JavaScript函数！

CSS中的我的媒体查询名为

@media only screen and (min-device-width: 320px) and (max-device-width: 767px) and (orientation: portrait)

和

@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait)

Answer 1

由于执行和忽略JS是您的首要任务，因此js本身就是我的建议!!

var width = window.innerWidth;
if(width >= 1024)
{
   /* do js for device width greater than 1024px */
} 
else
{
   /* do js for device width less than 1024px */
}

Answer 2

试试这个window.matchMedia：

window.matchMedia("screen and (max-width: 960px)")

来自Paul Irish的

Polyfill。

Answer 3

我会将行更改为

...
<li class="datenschutz"><a href="#">Datenschutz</a></li>
...

删除javascript并执行媒体查询中的所有逻辑

e.g。

...
#Footer .datenschutz { display: none; }
...

尽管在css中使用ID选择器并不是最佳的（解决方案：如果在js等中不需要，则将页脚div上的ID更改为类。）

当它只为特殊视口构建时，如何实现Javascript？

3 个答案: