javascript - 如何以特定的屏幕分辨率在页面上显示特定元素

Question

如何以特定的屏幕分辨率在页面上显示特定元素。网站的一种移动版本，类似于媒体查询，只会以一定的分辨率显示特定的 js (react) / html (jsx) 代码块

Answer 1

你可以看看这个类似问题的答案

如果您正在使用JSX该用法，则应将其包装{}为例如：

render() {
    return (
        // ...
        // In my knowledge JS event listeners are more taxing on the performance
        {
            if($(window).width() >= 1024){
                return <div className="bigger-than-1024"> RENDERED CONDITIONALLY </div>
            }
        }
    );
}

更好的方法可能是仍然渲染它，然后使用 CSS 类和媒体查询来不显示它：

@media only screen and (min-width: 1023px) {
    .bigger-than-1024 {
        display: none;
    }
}