根据屏幕宽度重复或不重复贝克背景图像

问题描述

我正在开发一个网页，遇到了问题。我有一个（可重复的）背景图片，在高达1200px的屏幕上看起来不错，但是在宽得多的屏幕（> 1600px +左右）上效果不佳。我想根据屏幕宽度设置重复次数。怎么办？

谢谢！

解决方法

如前所述，在询问此类问题时应提供您的代码。您需要CSS media queries：

/* for 1200px+ */
@media screen and (min-width: 1200px) {
    .myImageSelector: {
        background-repeat: repeat;
    }
}

/* for everything else */
.myImageSelector: {
    background-repeat: no-repeat;
}

,

如果您不想使用css，您可以知道组件渲染时的屏幕宽度。首先，您要像这样初始化状态：

auto.arima

然后，您也可以使用它来收听调整大小。

 const [
        windowSize,setWindowSize,] = useState({
        width: 0,height: 0,})

完成此操作后，状态即为您网页的内部宽度。这样，您就可以使用useeffect来监听更改并相应渲染任何内容。

useLayoutEffect(() => {
        const updateSize = () => {
            setWindowSize({
                ...windowSize,height: window.innerHeight,width: window.innerWidth,})
        }
        window.addEventListener(`resize`,updateSize)
        updateSize()
        return () => window.removeEventListener(`resize`,updateSize)
    },[])