Question

我有一个小按钮，我想根据窗口宽度移动一个位置。此按钮可以移动的上限（右侧）和下限（距离多远）。我目前有一个解决方案，但网页上的性能不是最佳的。按钮移动略有滞后。我当前的解决方案为按钮的位置设置了初始状态。我在componentDidMount方法中添加了一个eventListener来检测窗口大小的变化。当大小改变时，它调用以下方法：

updateButtonLocation() {
        if(window.innerWidth>=1260) {
            this.setState({editButtonLocation:1218});
        }
        else if(window.innerWidth<1260 && window.innerWidth>762){
            this.setState({editButtonLocation:window.innerWidth-42});
        }
        else {
            this.setState({editButtonLocation: 720});
        }
    }

以下css代码然后将按钮定位在我需要的位置：

style={props.isShowBtn?{display:"inline", left: props.editButtonLocation}:{display:'none'}}

还有另外两种可能更好的解决方案。而不是使用状态，我可以为样式执行以下操作：

style={props.isShowBtn?{display:"inline", left: 90vw}:{display:'none'}}

这会移动窗口大小的按钮，但我不认为我可以设置上限和下限。如果可以，我该怎么做？

我正在研究的另一个选项是使用媒体查询。但是，我对这项技术没有经验。是否可以使用此工具执行上述代码的操作？

Answer 1

＆＃13;

time.process_time()

＆＃13;

是的，可以使用媒体查询。您无法在不设置元素位置的情况下使用top和left等属性。在这种情况下，你可能想要使用保证金。

寻找更好的解决方案，根据窗口大小移动按钮，使用react

1 个答案: