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

window.matchMedia()返回一个对象，您需要检查matches属性：

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

Answer 3

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