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

【问题标题】：How to display specific elements on a page at a specific screen resolution如何以特定的屏幕分辨率在页面上显示特定元素
【发布时间】：2021-03-17 14:34:29
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs adaptive-layout

【解决方案1】：

你可以看看answer on this similar question

如果您使用的是 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;
    }
}

【讨论】：

我的 JS 示例可能不是最好的，因为它取决于重新渲染与在 componentDidMount 生命周期方法中添加侦听器