javascript 媒体查询 - 加载 HTML 个元素

Question

我想要一个 HTML 元素 (<p>HTML element</p>) 仅在屏幕尺寸超过特定宽度时加载到页面上。

我不想隐藏它；我希望它在屏幕尺寸低于 600 时完全移除，并在屏幕尺寸高于 600 时加载。

我试过了

if (window.matchMedia('screen and (min-width: 600px)')){
   $('body').append('<p>HTML element</p>');
}

但这对我不起作用。有什么线索吗？

Answer 1

为什么要进行这些媒体查询？ $(document).width() 将是一个解决方案。

if($(document).width()>600){
    $('body').append('<p>HTML element</p>');
}

Answer 2

if ( document.body.clientWidth > 600 )
{
  "add element"
}
else
{
  "Remove element"
}

Answer 3

window.matchMedia() returns一个对象，你需要检查matches 属性:

if (window.matchMedia('screen and (min-width: 600px)').matches){...}

javascript media query - loading HTML elements