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

Question

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

Answer 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;
    }
}

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

How to display specific elements on a page at a specific screen resolution

javascript

reactjs

adaptive-layout